【问题标题】:PDF.JS PDF is not rendering properly, appears mirrored and upside downPDF.JS PDF 未正确呈现,呈镜像且上下颠倒
【发布时间】:2019-06-04 21:36:05
【问题描述】:

我正在尝试让 pdf.js 在 IE 中工作。我几乎完全从 pdf.js 站点 https://mozilla.github.io/pdf.js/examples/ 上的“使用 base64 编码 PDF 的 Hello World”示例中复制了代码。 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 正在呈现并出现,但它是颠倒的,并且文本是镜像的,就像您正在看镜子中的文本一样。

如果有人能给我建议,我将不胜感激。谢谢

【问题讨论】:

  • 您检查过PDF数据吗?解码并将其保存到文件中,并确保它实际上没有被反转
  • 是的,我已经多次使用其他方式创建的 pdf,试图找到一种解决方案,使其在 IE 中工作。例如,当我尝试使用其他方式在 chrome 中加载 pdf 时,它们总是能正确呈现。如果我在 IE 中使用其他方式打开 pdf,它看起来也不错。但我真的需要这个解决方案来工作
  • 您使用的是哪个版本的 PDF.js?您如何在页面中包含主脚本?
  • 我刚刚下载了预构建的包,所以我猜它是最新版本。我在脚本标签中包含了“pdf.js”然后是“pdf.worker.js”

标签: javascript pdf pdf.js


【解决方案1】:

方法签名在 PR #10369 中更改,因此:

在 2.0.943 及更早版本中,它采用“常规”参数,即 格式化为 getViewport(scale, rotate, dontFlip)。

在 2.1.266 及更高版本中,它需要一个对象,即格式化为 getViewport({ 缩放、旋转、dontFlip })

来源: https://github.com/mozilla/pdf.js/issues/10809

公关: https://github.com/mozilla/pdf.js/pull/10369

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 谢谢。这解决了我的问题!如果是这样,他们应该更新文档。
    猜你喜欢
    • 1970-01-01
    • 2015-10-11
    • 2015-11-07
    • 1970-01-01
    • 2013-11-03
    • 2020-01-05
    • 2022-10-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多