如何使pdf.js库在中工作

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浏览器的特性。

您可以尝试使用ES5版本的pdf.js和pdf.worker.js版本(这里有一个关于使用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和

:

使用node_modules (‘pdfjs’库) :

1. 将“pdfjs//pdf.js”导入到导入
2. 把"pdfjs-dist/build/pdf.worker.js"导入到=> 导入"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