如何使用文件输入在 PDFJS 中打开本地 PDF？
[英]how to open a local PDF in PDFJS using file input?
3 个解决方案
解决方案1
40 2015-02-17 17:54:39
您应该能够使用 FileReader 将文件对象的内容作为类型化数组获取，pdfjs 接受（ https://mozilla.github.io/pdf.js/examples/ ）
//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
const loadingTask = pdfjsLib.getDocument(typedarray);
loadingTask.promise.then(pdf => {
// The document is loaded here...
});
};
//Step 3:Read the file as ArrayBuffer
fileReader.readAsArrayBuffer(file);
}
编辑：自从我在 2015 年写下第一个答案以来，pdfjs API 在某个时候发生了变化。更新以反映截至 2021 年的新 API（感谢@Chiel）以获得更新的答案
解决方案2
8 2020-06-03 12:58:19
如果 getDocument().then 不是函数：
我想我已经设法用新的 API 解决了新问题。 正如在这个 GitHub 问题 中提到的， 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 中可能不起作用。
解决方案3
0 2021-12-12 13:10:24
我采用了你的代码，它奏效了！ 然后我在这里和那里浏览了更多提示，然后我了解到有一种更方便的方法。
您可以使用以下命令获取客户端加载文件的 URL
URL.createObjectURL()
它减少了一层嵌套，您不需要读取文件，将其转换为数组等。
使用pdfjs时，无法通过在viewer.html文件参数中传递Uint8Array来呈现pdf
[英]Not able to render pdf by passing Uint8Array in the viewer.html file parameter while using pdfjs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.