如何使用pdf.js呈现pdf文件

How to render a pdf file using pdf.js?

本文关键字：pdf 文件 呈现 js 何使用      更新时间：2023-09-26

我创建了一个内容如下的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 with content

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。

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

这是一篇关于在本地文件中使用XMLHttpRequest的博客文章，以及关于Mozilla Firefox票证的讨论。

在项目中有一些票(包括这个和这个)可以提供指针。这张票的注释说:

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

我建议来解决你的问题你只是通过web服务器运行这个使用http协议。Nginx和Apache很容易安装和设置。

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

相关文章：