Ad

How To Make The Pdf.js Library Works In Internet Explorer

I have used pdf.js and pdf.worker.js to show a pop up modal. It works fine in every browser except IE. I have seen different answers to this problem but none of them worked for me. I have tried compatible.js to make the pdf.js work but it didn't help. Has anyone of you have any idea about this?? Please I really need help.

the code I have used to show the pdf document in pop up modal is below:

 // 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);
            }
        }
Ad

Answer

Perhaps you are using the latest version of pdf.js and pdf.worker.js version. Since the IE browser doesn't support ES6 format, when using the latest version of Pdf.js, there might have some feature which will not support IE 11 browser.

You could try to use the ES5 version of pdf.js and pdf.worker.js version (Here is a sample about using pdf.js, it works well on my side using IE11, you can check it):

  • pdf.js ES5 version: https://mozilla.github.io/pdf.js/es5/build/pdf.js
  • pdf.worker.js ES5 version: https://mozilla.github.io/pdf.js/es5/build/pdf.worker.js
Ad
source: stackoverflow.com
Ad