javascript - PDF.js 文档随机颠倒呈现

Question

我正在使用 PDF.js 插件在我的 polymerjs 应用程序中显示 pdf。有时 pdf 内容会颠倒呈现。以下是我使用 PDF.js 的方式:

            downloadPdf: function(item) {
                var pdfJsInitParams = {
                    url: app.baseURL + item.report_pdf,
                    httpHeaders: app.user.token
                };

                PDFJS.getDocument(pdfJsInitParams).promise.then(function(pdf) {
                    function renderPage(pageNumber, eltId) {
                        if(pdf.numPages < pageNumber) {
                            return;
                        }

                        pdf.getPage(pageNumber).then(function(page) {
                            var scale = 1.3;
                            var viewport = page.getViewport(scale);

                            // Prepare canvas using PDF page dimensions
                            var canvas = document.getElementById(eltId);
                            if(canvas) {
                                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);
                            }
                        }).catch(function(err) {
                            showToastWithText(err, 'error');
                        });
                    }

                    renderPage(1, 'report_1');
                    renderPage(2, 'report_2');
                });
            }

任何可能导致此问题的想法？

Answer 1

(看起来downloadPdf在短时间内被调用了多次)

render() 操作是异步的，您需要等待其完成，然后才能在同一 Canvas 上开始新的渲染，请参阅 https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html例子。如果您不想等待，请创建一个新 Canvas 。