PDF.js使用sail .js中的显示api

PDF.js using display APIs in sails.js

本文关键字：js 显示 api sail 使用 PDF      更新时间：2023-09-26

我是MVC框架的新手。我需要实现一个网站的PDF文件预览功能。我不想用viewer。html的方式实现它，我需要使用显示api。我通过Hello world示例来学习如何使用api。但我无法弄清楚index。html, hello.js在sails.js中的位置。

  • 我应该保持index.html作为一个。ejs文件在视图文件夹和嵌入hello.js内容在这个。ejs文件?
  • 我应该写一个单独的javascript文件，或者可以"获取"api和渲染逻辑去控制器作为一个方法?

我试着先让helloworld示例工作。下载pdf.js和pdf.worker.js到我的assets/js/文件夹。将helloworld.pdf保存在views文件夹中，并将hello.js和index.html合并为一个文件index. js。使用路由，我链接到有index. js的视图。但是当我点击链接时，它会抛出如下错误:

>     21|     PDFJS.disableWorker = true;
>     22|     </script>
>  >> 23|     <%
>     24|     'use strict';
>     25|
>     26| var doc =PDFJS.getDocument('helloworld.pdf');
> 
> PDFJS is not defined]

当我克隆git存储库并打开教程中给出的index.html时，它工作得很好，并显示了内容。

我可能在很多地方出错了。有人能帮我找个正确的方向吗?

我的ejs文件，其中嵌入了hello.js逻辑:

<!doctype html>
<html>
<head>
    <script src="../../assets/js/pdf.js"></script>
    <script>
    PDFJS.disableWorker = true;    
    </script>    
    <%
    'use strict';
var doc =PDFJS.getDocument('helloworld.pdf');
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
    pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});
%>
</head>
<body>
  <canvas id="the-canvas" style="border:1px solid black;"/>
</body>
</html>

所以在漫长的一天和许多问题之后，我弄清楚了一些关于sails.js的事情。我遇到过"PDFJS"这样的错误。workerSrc not specified"，或者有时只是一个没有内容的空白画布。

我做了以下操作使它工作:

  1. 将hello.js、PDF.js和PDF.worker.js保存在assets/js/文件夹中。
  2. 在layout.js中，将PDF.js, hello.js的标签移到"样式表和预处理器"下而不是"客户端javascript"

  3. 确保标签的顺序正确。hello.js应该出现在PDF.js脚本标签之后。4.在layout.js中，定义PDFJS。workerSrc如下:

    PDFJS。workerSrc = "/js/pdf.worker.js"

    在hello.js和pdf.js之间

    保留你的索引。
  4. 从layout.js中删除pdf.worker.js的script标签。
相关文章：