PDF are displayed mirror-reflected and vertical diverted, when using pdf.js in AngularJS application

Hi,

I’ve got similar issue corresponding to previously reported #3665, but it occurs in quite different enviroment, so I’ve created separate issue for this.

Details: I use pdf.js in some application. HTML5 views are generated by Java-based backend (JSP, Spring), where I’ve integrated AngularJS to manipulate client-side code directly in web browser.

I’ve got an Angular service, which is simple wrapper for pdf.js basic functionality:

application.service("PdfjsService", [ function() {
    // reference to service for callbacks
    var __service = this;

    this.url = "";

    this.canvasId = "";

    // initial values
    this.page = 1;
    this.scale = 1.0;

    this.init = function(canvasId, page, scale) {
        this.canvasId = canvasId;
        if (scale) {
            this.scale = scale;
        }

        if (page) {
            this.page = page;
        }
    };

    this.render = function(url) {
        if (PDFJS) {
            PDFJS.getDocument(url).then(function(pdf) {
                pdf.getPage(__service.page).then(function(page) {
                var scale = __service.scale;
                var viewport = page.getViewport(scale);

                var canvas = document.getElementById(__service.canvasId);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                page.render(renderContext);
              });
            });

        }

    };
}]);

I can call this service in two different ways:

• only in controller, like this:

// other code in Angular controller

PdfjsService.init('the-canvas', 1, 1);
PdfjsService.render('${contextPath}/resources/img/somefile.pdf');

// other code in Angular controller

or

• directly in JSP HTML5 code, after passing reference to PdfjsService as $scope var:

controller:

// other code in Angular controller


            PdfjsService.init('the-canvas', 1, 1);
            $scope.pdfservice = PdfjsService;

// other code in Angular controller

and view:

<!-- other HTML -->

 <div class="span4">
    <canvas id="the-canvas" style="border:1px solid black; width:350px;"/>
  </div>
  {{pdfservice.render('${contextPath}/resources/img/somefile.pdf')}}

<!-- other HTML -->

${contextPath} is Spring variable, which has no impact for whole situation (it’s only a part of path to pdf file).

Pdf file is visible in both cases, only in the second one is diverted vertical and mirrored 😕

I can’t attach this specific pdf file, because it’s confidential (it’s a part of commercial project and only for internal use)

[yurydelendik]

Looks like the issue was resolve. Closing.

The “mirrored” canvas display happens:

1. when multiple render tasks a painting to the same canvas;
2. or, canvas was reset (by changing width or height) during render task.

To avoid this, don’t (re)use the canvas until the page rendering is finished or canceled.

[Todai88]

@yurydelendik I am facing an identical issue myself. I’m working on an AngularJS application where one of the core requirements is to view and sign off PDFs.

At the moment I’ve got a working PDF that I’m using as a placeholder which I reference by its path. It displays fine in any traditional PDF-reader, but when I attempt to reference it in Angular the pdf comes out distorted.

I’ve used an identical implementation as the onPrevNext that you referred Varun to:

`(function () {

"use strict";

angular.module('kioskApp')
    .controller('pdfpageController', pdfpageController);

function pdfpageController($http, $scope, $window, $mdDialog, $sce, user, apiController) {
    let vm = this;
    vm.isBusy = true;
    let fileURL;
    $scope.content;
    $scope.boundingBox = {
        width: 700,
        height: 300
    };

    let pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1,
        canvas = document.getElementById('test-canvas'),
        ctx = canvas.getContext('2d');

    function renderPage(num) {

        pageRendering = true;

        pdfDoc.getPage(num).then(function (page) {
            let viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            let renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };

            let renderTask = page.render(renderContext);

            renderTask.promise.then(function () {
                pageRendering = false;

                if (pageNumPending !== null) {
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });
        document.getElementById('page_num').textContent = pageNum;
    }

    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
    }

    document.getElementById('prev').addEventListener('click', onPrevPage);

    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
            return;
        }
        pageNum++;
        queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);




    $scope.goback = function () {
        $window.location.href = '#!/additional';
    } 

    vm.content = {
        "where": "WHERE UserID = 3333 AND WorksiteID = 3395",
        "strcon": "JaberoSiteManagement"
    };


    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }


    function setPdf(pdf) {
        PDFJS.getDocument(pdf).then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textcontent = pdfDoc.numPages;

            renderPage(pageNum);

        });
    }
    $http.post("http://somedata.com/api/test_pdf_table/get/", JSON.stringify(vm.content))
        .then(function (response) {
            //success

            vm.data = response.data;
        },
        function (error) {

        })
        .finally(function () {
            setPdf(vm.data[0].Path);
        });

    
}

})();`

The code runs intended with no errors (but some small warnings regarding the arraybuffer:

The provided value ‘moz-chunked-arraybuffer’ is not a valid enum value of type XMLHttpRequestResponseType.

I’d love to hear your thoughts about this. You can find the example on our website