Доступ к файлу перед загрузкой с использованием pdf.js - PullRequest
Новая
       38

Доступ к файлу перед загрузкой с использованием pdf.js

0 голосов
/ 06 июля 2019

Я хотел бы получить количество страниц в документе pdf до того, как будет загружено.Я думаю, что это возможно с помощью библиотеки pdf.js, но я просто не могу заставить ее работать: (

Пожалуйста, смотрите мой код ниже. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>PDF.js file input test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
</head>
<body>
    <div id="outerwrap"><input type="file" accept=".pdf" id="thisfile" /></div>
<script>
    pdfjsLib.GlobalWorkerOptions.workerSrc = "build/pdf.worker.min.js";
(function() {
    var inputElement = document.getElementById("thisfile");
    inputElement.addEventListener("change", function (e){
    var file = e.target.files[0];
    var url = URL.createObjectURL(file);
    // var jsonfile = JSON.parse(JSON.stringify(file)), jsonurl = JSON.parse(JSON.stringify(url));
    var pdf = pdfjsLib.getDocument(url);
    pdf.then(function(pdf){
    var pages = pdf.pdfInfo.numPages;
    console.log("Number of pages: " + pages);
    });
    window.URL.revokeObjectURL(url);
    });
})();
</script>
</body>
</html>

Когда я передаю "файл"или переменная "jsonfile" для pdfjsLib.getDocument Я получаю следующую ошибку: 

Uncaught Error: Invalid parameter object: need either .data, .range or .url
    at Object.t.getDocument (pdf.min.js:1)

Когда я передаю "url" или "jsonurl", я получаю одно waring и три сообщения об ошибке: 

Deprecated API usage: PDFDocumentLoadingTask.then method, use the `promise` getter instead.

GET blob:http://localhost/8eca90d0-4b10-4f6a-802a-614d98999b76 net::ERR_FILE_NOT_FOUND

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': TypeError: Failed to fetch could not be cloned.

Uncaught (in promise) e {name: "UnknownErrorException", message: "Failed to fetch", details: "UnknownErrorException: Failed to fetch"}details: "UnknownErrorException: Failed to fetch"message: "Failed to fetch"name: "UnknownErrorException"__proto__: Error

Может кто-нибудь показать мне, что я делаю не так?

Редактировать: Я пробовал это. Никаких ошибок сейчас, но ничего не происходит после выбора файла PDF: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>PDF.js file input test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
</head>
<body>
    <div id="outerwrap"><input type="file" accept=".pdf" id="thisfile" /></div>
<script>
    pdfjsLib.GlobalWorkerOptions.workerSrc = "build/pdf.worker.min.js";

    function convertDataURIToBinary(dataURI){
    var BASE64_MARKER = ";base64,";
    var base64Index = 28;
    var base64 = dataURI.substring(base64Index);
    var raw = window.atob(base64);
    var rawLength = raw.length;
    var array = new Uint8Array(new ArrayBuffer(rawLength));
    for(var i = 0; i < rawLength; i++){ array[i] = raw.charCodeAt(i); }
    return array; }

(function(){
    var inputElement = document.getElementById("thisfile");
    inputElement.addEventListener("change", function (e){
    var file = e.target.files[0];
    var reader = new FileReader(); reader.onload = function(ez){
    reader.readAsDataURL(file);
    var dataURI = reader.result;
    var binaris = convertDataURIToBinary(dataURI);
    var pdf = pdfjsLib.getDocument(binaris);
    pdf.then(function(pdf){
    var pages = pdf.pdfInfo.numPages;
    console.log("Number of pages: " + pages);
    }); } });
})();
</script>
</body>
</html>

1 Ответ

0 голосов
/ 07 июля 2019

Я нашел решение здесь: https://gist.github.com/frontenddeveloping/ab58f46150823f4c0aa6

Найдите мой новый, рабочий код ниже. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>PDF.js file input test</title>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@1.10.100/build/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@1.10.100/build/pdf.worker.min.js"></script>
</head>
<body>
<div id="outerwrap"><input type="file" accept=".pdf" id="thisfile" /></div>
<script>
function readPDFFile(pdf){
PDFJS.getDocument({data: pdf}).then(function(pdf){
var pdfPages = pdf.pdfInfo.numPages;
console.log(pdfPages); }); } // <--- get number of pages
window.onload = function(){
document.getElementById('thisfile').addEventListener('change', function(){
var file = this.files[0]; if (!file){ return; }
var fileReader = new FileReader();
fileReader.onload = function(e){ readPDFFile(new Uint8Array(e.target.result)); };
fileReader.readAsArrayBuffer(file); }); };
</script>
</body>
</html>
...