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

Question

我已经使用 pdf.js 和 pdf.worker.js 来显示弹出模式。它在除 IE 之外的所有浏览器中都可以正常工作。我看到了这个问题的不同答案，但 none 对我有用。我已尝试 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浏览器的功能。

你可以尝试使用ES5版本的pdf.js和pdf.worker.js版本（这里是sample关于使用pdf.js，我这边使用效果很好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' 库）：

点导入“pdfjs-dist/build/pdf.js”到导入“pdfjs-dist/es5/build/pdf.js”
点import "pdfjs-dist/build/pdf.worker.js" to => import "pdfjs- dist/es5/build/pdf.worker.js"

或

使用ES5版本：

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

Answer 3

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

Answer 4

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

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

How to make the pdf.js library works in Internet explorer

javascript

pdf

canvas

modal-dialog

internet-explorer-11