PDF.JS PDF无法正常渲染,显示为镜 像和颠倒

问题描述 投票:5回答:1

我想让pdf.js在IE中工作。我几乎完全从https://mozilla.github.io/pdf.js/examples/的pdf.js站点上的“Hello World using base64 encoded PDF”示例中复制了代码。 PDF是颠倒和镜像的。我环顾四周,其中一个常见的原因是重复使用画布进行多次渲染,但我不这样做,我只是渲染一次,所以我真的不知道。

在我的HTML文档的顶部,我有:

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

然后我基本上就像这样从demo中复制了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正在呈现并显示,但它的上下颠倒和文本被镜像,就像你在镜子中查看文本一样。

如果有人能给我建议我会很感激。谢谢

javascript pdf pdf.js
1个回答
9
投票

将{scale:scale}更改为比例。它想要一个数字而不是一个对象。示例文档是错误的。

© www.soinside.com 2019 - 2024. All rights reserved.