PDF.js 在 sails.js 中使用显示 API

Question

我是 MVC 框架的新手。我需要为网站实现 PDF 文件的预览功能。而且我不想以 viewer.html 的方式实现它，我需要使用显示 API。我通过 Hello world example 了解如何使用 API。但我无法弄清楚 index.html、hello.js 在 sails.js 中的位置。

我是否应该将 index.html 作为 .ejs 文件保存在视图文件夹中并将 hello.js 内容嵌入此 .ejs 文件中？
我应该写一个单独的 javascript 文件还是 "get" API 和渲染逻辑可以作为一种方法放在控制器中？

我试图让 helloworld 示例首先运行。将 pdf.js 和 pdf.worker.js 下载到我的 assets/js/ 文件夹中。将 helloworld.pdf 保存在视图文件夹中，并将 hello.js 和 index.html 合并为一个文件 - index.ejs。使用路线，我 link 进入了具有 index.ejs 的视图。但是当我点击 link 时，它会抛出如下错误：

>     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>

Answer 1

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

我做了以下工作来让它工作：

将 hello.js、PDF.js 和 PDF.worker.js 保存在 assets/js/ 文件夹中。
在 layout.js 中，移动 PDF.js 的标签，hello.js 在 "Stylesheets and Preprocessors" 下，而不是 "client-side javascript"
确保标签的顺序正确。 hello.js 应该在 PDF.js 脚本标签之后。 4.Inlayout.js，定义PDFJS.workerSrc如下：

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

介于 hello.js 和 pdf.js 之间。
1. 在视图中保留您的 index.ejs 文件并正确定义路由。
2. 从 layout.js 中删除 pdf 的脚本标签。worker.js 如果它已被自动包含。

PDF.js 在 sails.js 中使用显示 API

PDF.js using display APIs in sails.js

javascript

pdf

node.js

pdf.js

sails.js