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.

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.

• javascript
• canvas
• pdf.js
• pdf-parsing
• pdf-rendering

2 Answers 2

If your PDF.js isn't working in your IE11 it requires patibility.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/patibility.js"></script>

You can also add file below:

• metadata.js
• bidi.js

Hope it help.

Thats the code for PDF.js framework... i would do is to check if IE10 works OK... if not!!! then your code have some stuff than cannot create from the right way... PDF.js that you can validate. (validate on IE11) then is not framework issue.

Other issue could be that some characters are not OK!! could you post your var "data"??? Regards!!!