Используя PDF.js, как визуализировать ширину и высоту холста на мобильных устройствах так же, как на рабочем столе? - PullRequest
Новая
       34

Используя PDF.js, как визуализировать ширину и высоту холста на мобильных устройствах так же, как на рабочем столе?

0 голосов
/ 17 апреля 2019

Я рендерим 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

Конфигурация: - Веб-браузер и его версия: 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));
            }
        });

Снимок экрана, когда я щелкаю мышью на элементе визуализированного холста:

Рабочий стол

Мобильный

...