PDF.js 未以正确的页面顺序显示 PDF 文件答案

【问题标题】：PDF.js not showing PDF files in correct page orderPDF.js 未以正确的页面顺序显示 PDF 文件
【发布时间】：2022-03-18 13:57:06
【问题描述】：

我正在使用以下代码使用 PDF.js 在 IE 浏览器中显示 PDF。但是这些页面的显示顺序与原始文件的顺序不同。我该如何解决这个问题？仅在大型 PDF 文档时会发生这种情况...

if (response && response.data.Success) {
            var arrayBufferedPdf = base64ToArrayBuffer(response.data.Document);
            PDFJS.workerSrc = "./scripts/pdf.worker.js";
            PDFJS.getDocument({ data: arrayBufferedPdf }).then(function (pdf) {
                var pageNum = 1;
                var numPages = pdf.numPages;
                for (pageNum; pageNum <= numPages; pageNum++) {
                    pdf.getPage(pageNum).then(function (page) {
                        var scale = 1.25;
                        var viewport = page.getViewport(scale);
                        var canvasContainer = document.getElementById('canvas_container');
                        var canvas = document.createElement('canvas');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        canvasContainer.appendChild(canvas);
                        var context = canvas.getContext('2d');
                        page.render({ canvasContext: context, viewport: viewport });
                    });
                }
             });
        }

【问题讨论】：

pdf.getPage(pageNum).then(...) 听起来这个 getter 是异步方法？
是.. 它是.. PDF 将转换为 base 64 并作为响应给出..
那么您很可能必须首先“收集”所有getPage 调用的结果，以便之后以正确的顺序呈现它们...
这适用于少于 20 页的文档，但不止于此……我们的页面顺序不正确
@Jackphilip 您是否能够修复它？对于特定的 pdf，它对我来说很重要。我不确定它是 pdf 问题还是 pdfjs。

标签： javascript pdf.js

【解决方案1】：

我遇到了同样的问题。我使用异步和等待修复了相同的问题。请检查。

async function renderPages(pdfDoc) {
                    var docId = pdf.docId;
                    var pdfDocumentObject =  {};
                    pdfDocumentObject[docId] = pdfDoc;
                    pdfData.setPdfDocumentObject(pdfDocumentObject);
                    for (var num = 1; num <= pdfDoc.numPages; num++) {
                        await pdfDoc.getPage(num).then(renderPage);
                    }
                }

                if(pdf.docBlob && pdf.docId == null){
                    var blob = b64toBlob(pdf.docBlob, 'pdf');
                    pdfurl = URL.createObjectURL(blob);
                    PDFJS.getDocument(pdfurl).then(renderPages);
                }

【讨论】：

【解决方案2】：

对于任何在 2022 年寻找答案的人：

如果您正在检索整个文档，并使用循环通过循环索引或计数器逐一检索页面，您知道有时它不会按顺序呈现页面。要解决此问题，不要使用循环，而是使用递归函数来获取每个页面 - 即：

javascript 中的伪代码 - $ 表示变量

代替：

loop $index:
    downloadedPDF.getPage($index).then(...);

使用：

$counter = 1; /*denoting page 1*/

function getSinglePage(){
    downloadedPDF.getPage($counter).then(()=>{
        $counter++;
        getSinglePage();
    })
}

然后触发一次函数开始递归

getSinglePage($counter);

【讨论】：