javascript – 如何使用pdf.js呈现pdf文件?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用pdf.js呈现pdf文件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个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文件.

@H_502_13@解决方法
在使用file:protocol而不是http:或https:时,您似乎遇到了这个问题.不同协议之间存在不同的安全考虑因素.

这是a blog post about using XMLHttpRequest with local filesdiscussion on a Mozilla Firefox ticket.

项目中有一些可能提供指针的票证(包括this onethis one). this ticket评论说:

Typical pdf.js use cases requires to use a web server and modern HTML5 browser.

我建议您解决您的问题,只需通过Web服务器运行即可使用http协议. Nginx和Apache易于安装和设置.

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

猜你在找的JavaScript相关文章