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


how to open a local PDF in PDFJS using file input?

我想知道是否可以使用input type="file"选择pdf文件并使用PDFJS打开它

相关讨论

您应该能够使用FileReader以PDFJS接受的类型数组形式获取文件对象的内容(http://mozilla.github.io/pdf.js/api/draft/PDFJS.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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);

 }
相关讨论

如果getDocument()。then不是函数：

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

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

变成这样的：

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

将旧的答案改编为新的api以符合赏金要求，结果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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);

 }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>

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

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

  </body>

</html>

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

注意：

这可能在jsFiddle中不起作用。