Question

我想知道是否有办法使用input type="file"选择pdf文件并使用PDFJS

打开它

Answer 1

您应该能够使用FileReader将文件对象的内容作为类型化数组获取，PDFJS接受（http://mozilla.github.io/pdf.js/api/draft/PDFJS.html）

//Step 1: Get the file from the input element                
inputElement.onchange = function(event) {

    var file = event.target.files[0];

    //Step 2: Read the file using file reader
    var fileReader = new FileReader();  

    fileReader.onload = function() {

        //Step 4:turn array buffer into typed array
        var typedarray = new Uint8Array(this.result);

        //Step 5:PDFJS should be able to read this
        PDFJS.getDocument(typedarray).then(function(pdf) {
            // do stuff
        });


    };
    //Step 3:Read the file as ArrayBuffer
    fileReader.readAsArrayBuffer(file);

 }

Answer 2

如果getDocument（）。then不是函数：

我认为我已经设法用新的API解决了新问题。如this GitHub issue中所述，getDocument函数现在已添加了一个promise。简而言之：

PDFJS.getDocument(typedarray).then(function(pdf) {
    // The document is loaded here...
});

成为这个：

const loadingTask = pdfjsLib.getDocument(typedarray);
loadingTask.promise.then(pdf => {
    // The document is loaded here...
});

使旧的答案适应新的api以符合赏金的要求，结果如下：

//Step 1: Get the file from the input element                
inputElement.onchange = function(event) {

    //It is important that you use the file and not the filepath (The file path won't work because of security issues)
    var file = event.target.files[0];

    var fileReader = new FileReader();  

    fileReader.onload = function() {

        var typedarray = new Uint8Array(this.result);

        //replaced the old function with the new api
        const loadingTask = pdfjsLib.getDocument(typedarray);
            loadingTask.promise.then(pdf => {
                // The document is loaded here...
            });

    };
    //Step 3:Read the file as ArrayBuffer
    fileReader.readAsArrayBuffer(file);

 }

我在下面创建了一个带有以下源代码正式发行版的示例，以表明它正在工作。

/*Offical release of the pdfjs worker*/
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js';
document.getElementById('file').onchange = function(event) {
  var file = event.target.files[0];
  var fileReader = new FileReader();
  fileReader.onload = function() {
    var typedarray = new Uint8Array(this.result);
    console.log(typedarray);
    const loadingTask = pdfjsLib.getDocument(typedarray);
    loadingTask.promise.then(pdf => {
      // The document is loaded here...
      //This below is just for demonstration purposes showing that it works with the moderen api
      pdf.getPage(1).then(function(page) {
        console.log('Page loaded');

        var scale = 1.5;
        var viewport = page.getViewport({
          scale: scale
        });

        var canvas = document.getElementById('pdfCanvas');
        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
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function() {
          console.log('Page rendered');
        });

      });
      //end of example code
    });

  }
  fileReader.readAsArrayBuffer(file);
}

<html>

  <head>
  <!-- The offical release-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.js"> </script>
  </head>

  <body>
    <input type="file" id="file">
    <h2>Rendered pdf:</h2>
    <canvas id="pdfCanvas" width="300" height="300"></canvas>

  </body>

</html>

希望这会有所帮助！如果没有，请发表评论。

注意：

这可能在jsFiddle中不起作用。

如何使用文件输入在PDFJS中打开本地PDF？

2 个答案:

如果getDocument（）。then不是函数：

注意：