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

【问题标题】：PDF.js using display APIs in sails.jsPDF.js 在sails.js 中使用显示API
【发布时间】：2015-09-27 11:52:26
【问题描述】：

我是 MVC 框架的新手。我需要为网站的 PDF 文件实现预览功能。而且我不想以 viewer.html 的方式实现它，我需要使用显示 API。我通过Hello world example 学习如何使用 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.ejs。使用路由，我已链接到具有 index.ejs 的视图。但是当我点击链接时，它会抛出如下错误：

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

【问题讨论】：

标签： javascript node.js pdf sails.js pdf.js

【解决方案1】：

因此，经过漫长的一天和更多的问题，我想出了关于sails.js 的一些事情。我遇到了诸如“未指定 PDFJS.workerSrc”之类的错误，或者有时只是一个没有内容的空白画布。

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

将 hello.js、PDF.js 和 PDF.worker.js 保存在 assets/js/ 文件夹中。
在 layout.js 中，移动 PDF.js 的标签，hello.js 位于“样式表和预处理器”而不是“客户端 javascript”下
确保标签的顺序正确。 hello.js 应该在 PDF.js 脚本标签之后。 4.在layout.js中，定义PDFJS.workerSrc如下：

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

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

【讨论】：