javascript - 将编码的PDF base64加载到PDF.JS的viewer.js中(Load PDF base64 encoded into the viewer.js of PDF.JS)

Question

I'm fighting with PDF.JS.

(我正在与PDF.JS战斗。)

All I want is to ignore to add a pdf file in the GET-Paramter, for real.. who does this today??

(我要忽略的只是在GET-Paramter中添加一个pdf文件，实际上是..今天是谁做的？)

So my problem is, I'm trying to load a pdf file into my loaded pdf.js-file.

(所以我的问题是，我正在尝试将pdf文件加载到加载的pdf.js文件中。)

I want to use viewer.html and the viewer.js.

(我想使用viewer.html和viewer.js。)

The file is served as base64-encoded-string.

(该文件用作base64编码的字符串。)

For tests I am loading the base64 code into the html to have directly access over Javascript.

(为了进行测试，我将base64代码加载到html中，以直接通过Javascript进行访问。)

What files I'm loading:

(我正在加载哪些文件：)

• build/pdf.js

  (build / pdf.js)

• build/pdf.worker.js

  (build / pdf.worker.js)

• web/viewer.js

  (web / viewer.js)

No loading errors

(没有加载错误)

    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 here is.. {build: "d7afb74a", version: "2.2.228", getDocument: ?, LoopbackPort: ?, PDFDataRangeTransport: ?, …}

(Console.log在这里是.. {内部版本：“ d7afb74a”，版本：“ 2.2.228”，getDocument：?，LoopbackPort：?，PDFDataRangeTransport：?，…})

The PDF comes right and I can see Javascript gives me a correct console.log.

(PDF正确，我可以看到Javascript给了我正确的console.log。)

I can see it has 2 pages and more than 1MB data.

(我可以看到它有2页和超过1MB的数据。)

So I think the code and pdf is okay.

(所以我认为代码和pdf都可以。)

So and now I dont't want to use a fkn canvas.

(所以现在我不想使用fkn canvas。)

(I only saw tutorials where users working with canvas and not with the viewer.html) I'm not going to work with iframes,canvas or objects.

(（我只看到了教程，其中用户使用画布，而不使用viewer.html。）我将不使用iframe，canvas或对象。)

I just want that the viewer.js is taking MY pdf not any other.

(我只希望viewer.js正在获取我的pdf，而不是其他任何PDF。)

(example.pdf)

(（example.pdf）)

I want that pdf.js is loading the pdf im parsing with PHP and onload it should just appears.

(我希望pdf.js用PHP加载pdf im解析并在加载时应显示它。)

PHP is giving the pdf base64 encoded.

(PHP正在给pdf base64编码。)

I saw the article on the docu of pdf.js: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#file

(我看到了有关pdf.js文档的文章： https : //github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#file)

You can use raw binary data to open a PDF document: use Uint8Array instead of URL in the PDFViewerApplication.open call.

(您可以使用原始二进制数据打开PDF文档：使用Uint8Array代替PDFViewerApplication.open调用中的URL。)

If you have base64 encoded data, please decode it first -- not all browsers have atob or data URI scheme support.

(如果您具有base64编码的数据，请先对其进行解码-并非所有浏览器都支持atob或数据URI方案。)

(The base64 conversion operation uses more memory, so we recommend delivering raw PDF data as typed array in first place.)

(（base64转换操作使用更多的内存，因此我们建议首先将原始PDF数据作为类型化数组交付。）)

What a nice tipp.

(真是个好小费。)

BUT nobody says where you have access to PDFViewerApplication.

(但是没有人说您可以在哪里访问PDFViewerApplication。)

If I do this:

(如果我这样做：)

pdfjsLib.PDFViewerApplication.open(pdfAsArray);

I will get an error like 'open is not a function' (i tried with load() too)

(我会收到类似“打开不是函数”的错误（我也尝试过用load（））)

Sry for my bad english, hope you understand my problem and can help me ..

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

  ask by Da Flo translate from so

Answer 1

等待大神答复