如何使用文件輸入在 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.