我是 MVC 框架的新手。我需要为网站实现 PDF 文件的预览功能。我不想以viewer.html 的方式实现它，我需要使用显示API。我经历了Hello world example了解如何使用 API。但我无法弄清楚 index.html、hello.js 将放在 sails.js 中的哪里。
- 我应该将 index.html 作为 .ejs 文件保留在 View 文件夹中，并将 hello.js 内容嵌入到该 .ejs 文件中吗？
- 我应该编写一个单独的 JavaScript 文件，还是可以将“获取”API 和渲染逻辑作为方法放入 Controller 中？
我尝试先让 helloworld 示例正常工作。将 pdf.js 和 pdf.worker.js 下载到我的 asset/js/文件夹中。将helloworld.pdf保存在views文件夹中，并将hello.js和index.html制作成一个文件-index.ejs。使用路线，我链接到具有index.ejs 的 View 。但是当我点击链接时，它会抛出如下错误:
> 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”之类的错误，或者有时只是一个没有内容的空白 Canvas 。
我执行了以下操作以使其正常工作:
- 将 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 之间。
- 将您的 index.ejs 文件保留在 View 中并正确定义路由。
- 如果已自动包含 pdf.worker.js，请将其脚本标记从layout.js 中删除。
关于javascript - PDF.js 在 sails.js 中使用显示 API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31311831/