logo标签列表

PDF.JS无法正常呈现PDF文件，显示为镜像和倒置。

javascriptpdfpdf.js
7
我正在尝试让pdf.js在IE中运行。我几乎从pdf.js网站上的“使用base64编码PDF的Hello World”示例中复制了代码，网址为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);
        });

我真正改变的唯一一件事是注释掉了几行代码，这些代码根据视口设置画布的宽度和高度，因为它不起作用，它总是崩溃的，所以我在canvas html中内联指定了宽度和高度。

我似乎无法在这个新的stackoverflow设计中包含图片，但pdf正在呈现并出现了，但它是倒置的，文本是镜像的，就像你在镜子里看文本一样。

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

你检查过PDF数据了吗？解码并将其保存到文件中，并确保它实际上没有被反转。 - Phil
是的，我已经多次使用创建的PDF文件以其他方式尝试解决在IE中使其正常工作的问题。例如，在Chrome中尝试使用其他方法加载PDF时，它们始终正确呈现。如果我使用其他方式在IE中打开PDF，它看起来也没问题。但我真的需要这个解决方案能够正常工作。 - Geoff L
你使用的是哪个版本的PDF.js？你是如何在页面中包含主要脚本的？ - Phil
我刚刚下载了预构建的软件包，所以我想这应该是最新版本。我在脚本标签中包含了"pdf.js"和"pdf.worker.js"。 - Geoff L
2个回答
13

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

2
谢谢。这解决了我的问题！如果是这种情况，他们应该更新文档。 - Sam
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接