Question

我正在Web应用程序中呈现AcroForm。渲染的画布大小在桌面浏览器中相同。即使我将窗口调整为较小的大小，渲染的画布大小也保持不变。正是我想要的。

但是，当我在移动设备或平板电脑中呈现相同的pdf时，画布大小会增加。我希望它与桌面浏览器相同。

以下是在桌面中渲染的画布： <canvas id="page1" moz-opaque="" width="794" height="1123" style="width: 794px; height: 1123px;"></canvas>

以下是在移动设备中为同一pdf呈现的画布： <canvas id="page1" moz-opaque="" width="1925" height="2725" style="width: 794px; height: 1124px;"></canvas>

请注意，我不需要所有PDF的固定画布大小。对于相应的pdf，我希望手机的画布大小与桌面的画布大小相同。

链接到PDF文件：http://foersom.com/net/HowTo/data/OoPdfFormExample.pdf

配置： -Web浏览器及其版本：FireFox 66.0.2 -操作系统及其版本：Windows 10 Pro -PDF.js版本：2.1.262 -是浏览器扩展程序：否

我用来渲染pdf的代码如下：

        pdfjsLib.workerSrc = "/js/Lib/pdf.worker.js";
        var DEFAULT_SCALE = 1.0;

        var container = document.getElementById('acroFormContainer');

        // Fetch the PDF document from the URL using promises.
        var loadingTask = pdfjsLib.getDocument(pathStringer);
        loadingTask.promise.then(function (doc) {
            // Use a promise to fetch and render the next page.
            var promise = Promise.resolve();
            pdfDoc = doc;

            for (var i = 1; i <= doc.numPages; i++) {
                promise = promise.then(function (pageNum) {
                    return doc.getPage(pageNum).then(function (pdfPage) {
                        // Create the page view.
                        var pdfPageView = new pdfjsViewer.PDFPageView({
                            container: container,
                            id: pageNum,
                            scale: DEFAULT_SCALE,
                            defaultViewport: pdfPage.getViewport({ scale: DEFAULT_SCALE, }),
                            annotationLayerFactory:
                                new pdfjsViewer.DefaultAnnotationLayerFactory(),
                            renderInteractiveForms: true,
                        });

                        // Associate the actual page with the view and draw it.
                        pdfPageView.setPdfPage(pdfPage);
                        return pdfPageView.draw();
                    });
                }.bind(null, i));
            }
        });

当我单击检查渲染的画布的元素时的快照：

Desktop

Mobile

使用PDF.js，如何在移动设备中呈现与桌面相同的画布宽度和高度？

0 个答案: