PDF.js not rendering pdf correctly in IE

Question

I am using PDF.js framework to render PDF. I am using base64 data to render PDF. But in IE 11 pdf looking blurry.

See below screen from IE 11

See below code :

var renderPDF = function(url, canvasContainer,data) {
        var scale= 0.9;  //"zoom" factor for the PDF

        function renderPage(page) {
            var canvas = document.createElement('canvas');
            var viewport = page.getViewport(scale);

            var ctx = canvas.getContext('2d');
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            canvasContainer.appendChild(canvas);

            page.render(renderContext);
        }

        function renderPages(pdfDoc) {
            for(var num = 1; num <= pdfDoc.numPages; num++)
                pdfDoc.getPage(num).then(renderPage);
        }

        PDFJS.disableWorker = false;

        var pdfAsDataUri = "data:application/pdf;base64,"+data; // shortened
        var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
        PDFJS.getDocument(pdfAsArray).then(renderPages);

    };

    var BASE64_MARKER = ';base64,';

    var convertDataURIToBinary = function(dataURI) {
      var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
      var base64 = dataURI.substring(base64Index);
      var raw = atob(base64);
      var rawLength = raw.length;
      var array = new Uint8Array(new ArrayBuffer(rawLength));

      for(var i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i);
      }
      return array;
    };

Please help me.

Answer 1

If your PDF.js isn't working in your IE11 it requires compatibility.js. You can insert the following line to your code right after the tag (before any other <script>s):

<script type="text/javascript" src="../../web/compatibility.js"></script>

You can also add file below:

• metadata.js
• bidi.js

Hope it help.