在sails.js中使用显示API的PDF.js
我是MVC框架的新手。 我需要为网站实现PDF文件的预览function。 我不想实现它的viewer.html方式，我需要使用显示API。 我经历了Hello world示例以了解如何使用这些API。 但是我无法弄清index.html，hello.js在sails.js中的位置。
- 我是否应该将index.html保存为视图文件夹中的.ejs文件，并在此.ejs文件中embeddedhello.js内容？
- 我应该写一个单独的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文件中embedded了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没有内容。
我做了以下工作：
- 在assets / js /文件夹中保存hello.js，PDF.js和PDF.worker.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文件在视图中，并正确定义路线。
- 如果已自动包含，则从layout.js中移除pdf.worker.js的脚本标记。