PDF.JS PDF не отображается должным образом, отображается зеркально и перевернуто - PullRequest
Новая
       5

PDF.JS PDF не отображается должным образом, отображается зеркально и перевернуто

0 голосов
/ 10 января 2019

Я пытаюсь заставить pdf.js работать в IE. Я почти точно скопировал код из примера "Hello World, использующего PDF в кодировке base64" на сайте pdf.js по адресу https://mozilla.github.io/pdf.js/examples/. PDF перевернут и зеркально отражен. Я посмотрел вокруг, и частой причиной этого является повторное использование холста для нескольких рендеров, но я не делаю этого, я просто рендеринг один раз, поэтому я действительно понятия не имею.

В верхней части моего HTML-документа у меня есть: 

$html .= '<canvas width="600px" height="2000px" id="the-canvas"></canvas>';

Тогда я в основном скопировал JS именно из демо-версии вот так (переменная encodedString - моя строка в формате pdf base64) 

        var pdfData = atob(encodedString);

        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];

        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

        // Using DocumentInitParameters object to load binary data.
        var loadingTask = pdfjsLib.getDocument({data: pdfData});
        loadingTask.promise.then(function(pdf) {
            console.log('PDF loaded');

            // Fetch the first page
            var pageNumber = 1;
            pdf.getPage(pageNumber).then(function(page) {

                console.log('Page loaded');

                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});

                // Prepare canvas using PDF page dimensions
                var canvas = document.getElementById('the-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
                };

                var renderTask = page.render(renderContext);
                renderTask.promise.then(function () {
                    console.log('Page rendered');
                });

            });
        }, function (reason) {
            // PDF loading error
            console.error(reason);
        });

Единственное, что я действительно изменил, так это то, что я закомментировал пару строк, задающих ширину и высоту холста на основе области просмотра, потому что он не работал, он всегда свернулся, поэтому вместо этого я указал ширину и высоту, встроенные в HTML холста.

Я не могу включить изображения в этот новый дизайн переполнения стека, но PDF-файл рендерится и отображается, но переворачивается и текст зеркально отражается, как будто вы смотрите на текст в зеркале.

Если бы кто-нибудь мог дать мне совет, я был бы признателен. спасибо

1 Ответ

0 голосов
/ 11 января 2019

Изменить {масштаб: масштаб} на масштаб Он хочет число, а не объект. Примеры документов неверны.

...