PDF.JS PDF is not rendering properly, appears mirrored and upside down

Question

I'm trying to get pdf.js to work in IE. I've copied the code almost exactly from the "Hello World using base64 encoded PDF" example on the pdf.js site at https://mozilla.github.io/pdf.js/examples/. The PDF is upside down and mirrored. I've looked around and a common cause of this is re-using the canvas for multiple renders, but I'm not doing that I'm just rendering once, so I really have no idea.

At the top of my html document i have:

$html .= '<canvas width="600px" height="2000px" id="the-canvas"></canvas>';

Then I've basically copied the JS exactly from the demo like so (encodedString variable is my pdf base64 string)

        var pdfData = atob(encodedString);

        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];

        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

        // Using DocumentInitParameters object to load binary data.
        var loadingTask = pdfjsLib.getDocument({data: pdfData});
        loadingTask.promise.then(function(pdf) {
            console.log('PDF loaded');

            // Fetch the first page
            var pageNumber = 1;
            pdf.getPage(pageNumber).then(function(page) {

                console.log('Page loaded');

                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});

                // Prepare canvas using PDF page dimensions
                var canvas = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                //canvas.height = viewport.height;
                //canvas.width = viewport.width;

                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                var renderTask = page.render(renderContext);
                renderTask.promise.then(function () {
                    console.log('Page rendered');
                });

            });
        }, function (reason) {
            // PDF loading error
            console.error(reason);
        });

The only thing i really changed was i commented out a couple of lines setting the canvas width and height based on viewport, because it wasnt working it was always collapsed, so instead i specified width and height inline with the canvas html.

I cant seem to include images with this new stack overflow design but the pdf is rendering and appears, but its upside down and the text is mirrored, like you're looking at the text in a mirror.

If anyone could give me advice i'd appreciate it. thanks

Answer 1

Change {scale: scale} to scale. It wants a number not an object. Example docs are wrong.

Answer 2

The method signature changed in PR #10369, hence:

In version 2.0.943 and earlier it takes "regular" parameters, i.e. formatted as getViewport(scale, rotate, dontFlip).

In version 2.1.266 and later it takes an object, i.e. formatted as getViewport({ scale, rotation, dontFlip })

Source: https://github.com/mozilla/pdf.js/issues/10809

PR: https://github.com/mozilla/pdf.js/pull/10369