How to render a pdf file using pdf.js?

StackOverflow https://stackoverflow.com/questions/22661794

  •  21-06-2023
  •  | 
  •  

質問

I created an html file with content as below 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);
  });
});

But the pdf is not shown correctly when I point the browser to index.html. I want the user to be able to select a pdf file on his computer and show that pdf in browser window.

役に立ちましたか？

解決

It looks like you are hitting this problem when using the file: protocol rather than http: or https:. There are different security considerations in play between the different protocols.

Here's a blog post about using XMLHttpRequest with local files, and a discussion on a Mozilla Firefox ticket.

There are a few tickets (including this one and this one) on the project that may provide pointers. A comment from this ticket says:

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

I suggest to fix your problem you just run this through a web server to use the http protocol. Nginx and Apache are easy to install and set up.

If that doesn't work generate pdf.js and pdf.worker.js for your system using this if the above step doesn't work.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top