PDF.js 文档随机倒置显示答案

【问题标题】：PDF.js document is presented upside down randomlyPDF.js 文档随机倒置显示
【发布时间】：2017-07-03 12:45:54
【问题描述】：

我正在使用 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');
                });
            }

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

【问题讨论】：

标签： javascript pdf polymer pdf.js

【解决方案1】：

（貌似downloadPdf在短时间内被多次调用）

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

【讨论】：