logo标签列表

如何使用pdf.js渲染PDF文件？

javascripthtmlpdf.js
7
我创建了一个以下内容的html文件index.html。
<html>
  <head>
    <script type="text/javascript" src="./pdf.js"></script>
    <script type="text/javascript" src="./hello.js"></script>
  </head>
  <body>
    <canvas id="the-canvas" style="border:1px solid black;"/>
  </body>
</html>

hello.js的内容：

PDFJS.disableWorker = true;
var pf = PDFJS.getDocument('./helloworld.pdf')
pf.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

但是当我将浏览器指向index.html时，pdf文件无法正确显示。我希望用户能够在计算机上选择一个pdf文件并在浏览器窗口中显示该pdf。

您可能无法访问本地文件系统。您是通过什么方式进行服务/访问的？http:？file:？ - Joe
另外，我认为第三行多余的反引号是一个打字错误。 - Joe
@Joe 我是通过文件访问它的：我不知道为什么通过 http: 或 file: 访问它会有所不同，毕竟它是 JavaScript，应该两种方式都可以工作。 - badanomaly
2
不要假设它。在某些情况下（也许是这种情况，也可能不是），它确实很重要。请参阅此链接：http://ejohn.org/blog/tightened-local-file-security/ - Joe
嗨，去年我也遇到了同样的问题，尝试在画布上绘制图像：当我从Google Chrome中的´file:\´加载页面（和图像）时，画布接受了它，但不允许我从画布中获取图像（使用toDataURL）。我在本地安装了Apache并再次进行了测试，结果正常。 - Roimer
1个回答
4
看起来您在使用file:协议而不是http:或https:时遇到了这个问题。不同的协议之间存在不同的安全考虑。
这里有一篇关于使用本地文件的XMLHttpRequest的博客文章，以及一个Mozilla Firefox票证上的讨论。
项目中有一些票证（包括这个和这个），可能提供指针。来自这个票证的评论说：

典型的pdf.js用例需要使用Web服务器和现代HTML5浏览器。

我建议解决您的问题，只需通过Web服务器运行它以使用http协议。Nginx和Apache易于安装和设置。
如果这不起作用，请使用此方法为您的系统生成pdf.js和pdf.worker.js。
创建了一个节点服务器，将helloworld.pdf和pdf.js放在静态文件中并提供index.html（http://paste.ubuntu.com/7157553/），但是提供的文件中仍然没有pdf。 http://localhost:3000/javascripts/helloworld.pdf可以显示pdf，这意味着它可用。也许我在这里做错了什么。 - badanomaly
除了 /javascripts/pdf.worker.js 返回 404 外（http://paste.ubuntu.com/7157625/），控制台没有其他错误。此外，script 标签 <script src="http://localhost:3000/javascripts/pdf.worker.js"></script> 已添加到 index.html 中，但我不知道是如何添加的。 我认为运行服务器并不是解决方案，因为当我从 GitHub 克隆 pdf.js 存储库并在浏览器中打开 helloworld 示例（https://github.com/mozilla/pdf.js/tree/master/examples/helloworld）时，它可以正常工作。 - badanomaly
那个脚本标签在index.html中不存在，所以我不知道该如何修复它。但是我创建了一个空的pdf.worker.js文件。 现在控制台上没有404错误了。现在pdf.js会出现一个警告：“警告：正在设置虚假工作线程。” - badanomaly
如果您没有放入所有的源文件，为什么您期望这能够工作呢？额外的脚本标签是在DOM中还是在HTML页面的源代码中？如果是后者，那么您提供的文件可能并非您认为的文件。 - Joe
当我打开控制台并使用检查器时，额外的脚本标记存在。 它不在我写的index.html中。 当我注释掉var pf = PDFJS.getDocument（'./ helloworld.pdf'）;，然后额外的脚本标记不会显示在检查器中。 - badanomaly
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接