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

【问题标题】：How to render a pdf file using pdf.js?如何使用 pdf.js 渲染 pdf 文件？
【发布时间】：2014-03-27 11:01:23
【问题描述】：

我创建了一个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:?
另外我认为第 3 行的额外反引号是一个错字。
@Joe 我通过文件访问它：我不知道为什么我通过 http: 或文件访问它很重要：毕竟它是 JavaScript 并且应该以任何方式工作。
不要假设。在某些情况下（可能是这种情况，也可能不是这种情况），它确实很重要。看到这个：ejohn.org/blog/tightened-local-file-security
嗨，去年我尝试在画布上绘制图像时遇到了同样的问题：当我在 Google chrome 中从“文件：\\”加载页面（和图像）时，画布接受了它，但是不允许我从画布（使用 toDataURL）获取图像。我在本地安装了 Apache 并从中再次测试，它工作正常。

标签： javascript html pdf.js

【解决方案1】：

看起来您在使用file: 协议而不是http: 或https: 时遇到了这个问题。不同协议之间存在不同的安全考虑。

这里是a blog post about using XMLHttpRequest with local files，还有一个discussion on a Mozilla Firefox ticket。

项目中有几张票（包括this one 和this one）可能会提供指点。来自this ticket 的评论说：

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

我建议解决您的问题，您只需通过网络服务器运行它以使用http 协议。 Nginx 和 Apache 易于安装和设置。

如果上述步骤不起作用，请使用this 为您的系统生成 pdf.js 和 pdf.worker.js。

【讨论】：

创建了一个节点服务器，将 helloworld.pdf 和 pdf.js 放在静态文件中并提供 index.html(paste.ubuntu.com/7157553)，提供的文件中仍然没有 pdf。 localhost:3000/javascripts/helloworld.pdf 但是显示 pdf 意味着它是可用的。也许我在这里做错了。
除了 404 for /javascripts/pdf.worker.js (paste.ubuntu.com/7157625/)no 控制台中的其他错误。还将脚本标签
index.html 中不存在该脚本标记，所以我不知道如何修复它。我仍然创建了一个空白的 pdf.worker.js。现在 404 错误不在控制台上。现在有一个警告“警告：设置假工人”。来自pdf.js。
如果你没有放入所有的源文件，为什么你期望它可以工作？额外的脚本标签是在 DOM 中还是在 HTML 页面的源代码中？如果是后者，那么您没有提供您认为正在提供的文件。
当我打开控制台并使用检查器时，会出现额外的脚本标签。它不在我写的 index.html 中。当我注释掉 var pf = PDFJS.getDocument('./helloworld.pdf'); 时，额外的脚本标签不会出现在检查器中。