javascript - 加载 PDF base64 编码到 PDF.JS 的 viewer.js

问题描述

我正在与 PDF.JS 战斗。我只想忽略在 GET-Paramter 中添加一个 pdf 文件，真的.. 今天谁这样做？？

所以我的问题是，我正在尝试将 pdf 文件加载到我加载的 pdf.js 文件中。我想使用 viewer.html 和 viewer.js。该文件以 base64 编码字符串的形式提供。对于测试，我将 base64 代码加载到 html 中，以便通过 Javascript 直接访问。

我正在加载哪些文件：

构建/pdf.js
构建/pdf.worker.js
网页/viewer.js

没有加载错误

    var BASE64_MARKER = ';base64,';
    var pdfAsArray = convertDataURIToBinary("data:application/pdf;base64, " + document.getElementById('pdfData').value);


    pdfjsLib.getDocument(pdfAsArray).then(function (pdf) {
        //var url = URL.createObjectURL(blob);
        console.log(pdfjsLib);
        pdf.getPage(1).then(function(page) {
            // you can now use *page* here
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale, });
            // Prepare canvas using PDF page dimensions.
            var canvas = document.getElementById('viewer');
            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,
            };
            page.render(renderContext);
        });

      //pdfjsLib.load(pdf);
    })


    function convertDataURIToBinary(dataURI) {
            var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
            var base64 = dataURI.substring(base64Index);
            var raw = window.atob(base64);
            var rawLength = raw.length;
            var array = new Uint8Array(new ArrayBuffer(rawLength));

            for (i = 0; i < rawLength; i++) {
                array[i] = raw.charCodeAt(i);
            }
            return array;
       }

Console.log 这里是.. {build: "d7afb74a", version: "2.2.228", getDocument: ƒ, LoopbackPort: ƒ, PDFDataRangeTransport: ƒ, ...}

PDF 正确，我可以看到 Javascript 给了我一个正确的 console.log。我可以看到它有 2 页和超过 1MB 的数据。所以我认为代码和pdf还可以。

所以现在我不想使用 fkn 画布。（我只看到了用户使用画布而不是 viewer.html 的教程）我不会使用 iframe、画布或对象。我只想让 viewer.js 拿走我的 pdf 而不是其他的。(example.pdf)

我希望 pdf.js 正在加载使用 PHP 解析的 pdf im 并且 onload 它应该只是出现。PHP 提供 pdf base64 编码。

看了pdf.js的docu上的文章：https ://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#file

您可以使用原始二进制数据打开 PDF 文档：在 PDFViewerApplication.open 调用中使用 Uint8Array 而不是 URL。如果您有 base64 编码的数据，请先对其进行解码——并非所有浏览器都支持 atob 或数据 URI 方案。（base64 转换操作使用更多内存，因此我们建议首先将原始 PDF 数据作为类型化数组提供。）

多好的小费啊。但是没有人说你可以在哪里访问 PDFViewerApplication。如果我这样做：

pdfjsLib.PDFViewerApplication.open(pdfAsArray);

我会收到类似“open is not a function”的错误（我也尝试过 load()）

对不起我的英语不好，希望你能理解我的问题并能帮助我..

标签： javascriptbase64pdf.js

javascript - 加载 PDF base64 编码到 PDF.JS 的 viewer.js

问题描述

解决方案

推荐阅读