如何使 pdf.js 库在 Internet Explorer 中工作

Question

我使用pdf.js 和pdf.worker.js 来显示弹出模式。它在除 IE 之外的所有浏览器中都能正常工作。我已经看到了这个问题的不同答案，但没有一个对我有用。 我试过compatible.js 使pdf.js 工作，但没有帮助。你们中有人对此有任何想法吗？ 请问我真的需要帮助。

我用来在弹出模式中显示 pdf 文档的代码如下：

 // shows te pdf in pop up

        function showPDF(pdf_url) {
            $("#pdf-loader").show();

            PDFJS.getDocument({ url: pdf_url }).then(function (pdf_doc) {

                __PDF_DOC = pdf_doc;
                __TOTAL_PAGES = __PDF_DOC.numPages;

                // Hide the pdf loader and show pdf container in HTML
                $("#pdf-loader").hide();
                $("#pdf-contents").show();
                $("#pdf-total-pages").text(__TOTAL_PAGES);

                // Show the first page
                __PDF_DOC.getPage(1).then(handlePages);
            }).catch(function (error) {
                // If error re-show the upload button
                $("#pdf-loader").hide();
                $("#upload-button").show();
            });
        }

        // takes the pages of pdf
        function handlePages(page) {
            //This gives us the page's dimensions at full scale
            var viewport = page.getViewport(1);

            //We'll create a canvas for each page to draw it on
            var canvas = document.createElement("canvas");
            //canvas.style.display = "block";

            canvas.setAttribute("id", "pdf" + __CURRENT_PAGE);

            canvas.style.cssText = "border-bottom:1px solid #000000; cursor:crosshair; text-align:center; ";

            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var a = canvas.width + 70;
            document.getElementById("con").style.width = (a + "px");
            if (a > 690) {
                console.log(a);
                $("#header").css({ marginLeft: "0px" });
                $("#header1").css({ marginLeft: "0px" });
            }
            else {
                $("#header").css({ marginLeft: "0px" });
                $("#header1").css({ marginLeft: "0px" });
            }
            //Draw it on the canvas
            page.render({ canvasContext: context, viewport: viewport });
            //Add it to the web page
            document.getElementById("div").appendChild(canvas);
            //document.body.appendChild(canvas);

            //Move to next page
            __CURRENT_PAGE++;
            if (__CURRENT_PAGE <= __TOTAL_PAGES) {
                __PDF_DOC.getPage(__CURRENT_PAGE).then(handlePages);
            }
        }

Answer 1

也许您使用的是最新版本的 pdf.js 和 pdf.worker.js 版本。由于 IE 浏览器不支持 ES6 格式，所以在使用最新版本的 Pdf.js 时，可能会有一些不支持 IE 11 浏览器的功能。

您可以尝试使用 pdf.js 的 ES5 版本和 pdf.worker.js 版本（这里是关于使用 pdf.js 的sample，它在我这边使用 IE11 效果很好，您可以查看）：

• pdf.js ES5版本：https://mozilla.github.io/pdf.js/es5/build/pdf.js
• pdf.worker.js ES5 版本：https://mozilla.github.io/pdf.js/es5/build/pdf.worker.js

Answer 2

IE11 不直接支持 ES6 功能，所以 PDF.js 库的某些功能在 IE11 中无法使用。

您需要使用ES5版本的pdf.js和pdf.worker.js。

任一：

使用 node_modules（'pdfjs-dist' 库）：

1. 点import "pdfjs-dist/build/pdf.js"到import "pdfjs-dist/es5/build/pdf.js"时间>
2. 点 import "pdfjs-dist/build/pdf.worker.js" 到 => import "pdfjs-dist/es5/build/pdf.worker.js"

或

使用 ES5 版本：

1. pdf.js：https://mozilla.github.io/pdf.js/es5/build/pdf.js
2. pdf.worker.js：https://mozilla.github.io/pdf.js/es5/build/pdf.worker.js

Answer 3

其他答案中提到的 ES5 版本实际上包含 ES6 代码（例如箭头函数） 回到这个版本是 ES5 安全和 IE 兼容：

• https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.4.11/pdf.min.js
• https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.4.11/pdf.worker.min.js

Answer 4

https://pdfjs.express 刚刚发布了一个围绕 pdf.js 的免费 UI 包装器，它可以在 IE 中运行，但我不确定它是否是官方的。