Warm tip: This article is reproduced from serverfault.com, please click

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

(javascript - How to make the pdf.js library works in Internet explorer)

发布于 2020-03-20 09:15:06

我已经使用pdf.jspdf.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);
            }
        }
Questioner
inaa
Viewed
11
Zhi Lv 2020-03-23 15:24:14

也许你正在使用最新版本的pdf.js和pdf.worker.js版本。由于IE浏览器不支持ES6格式,因此在使用最新版本的Pdf.js时,可能会有某些功能不支持IE 11浏览器。

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