pdf.js not loading pdf file

Question

I'm very new to pdf.js and am probably making some basic mistake. I'm trying to just copy the "Hello World with document load error handling" example provided here:

https://mozilla.github.io/pdf.js/examples/

I just copy and pasted the code across to new html, css and js files but didn't work. I tried changing the url in pdfjsLib.getDocument(url) to a local file directory on my computer ie ./pdf/test.pdf but didn't work. I tried changing the

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

to

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>

but that didn't work either.

My console log states two things:

1) Loading failed for the with source “file:///pdf.js/build/pdf.js”

2) TypeError: pdfjsLib is undefined

I understand I am a beginner here but would it be too much to ask the guys who put so much effort into creating it to write a few lines about how to use it for beginners like me? Anyways, if someone can help solve my what I'm sure is a very basic question, it would be much appreciated.

Thanks

Answer 1

Most of these problems are caused by the fact that you are running your test by opening an html file, thus the browser use the file:// instead of http:// or https:// .

A quick "hack" to fix the problem in you situation is to insert the <base href="https://mozilla.github.io"> (HTML base tag) inside the head of your test html file (I used the given example as it is, with no changes inside a blank html document) so that you fool the browser and make it search on the Github for the files.

The "correct" way to test such codes and libraries is to install a local web-server and serve the files from there (usually as http://localhost ).

An example of the test I created:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <meta name="description" content="Testing pdf.js">
        <meta name="author" content="GramThanos">

        <!-- hack code -->
        <base href="https://mozilla.github.io">
    </head>
    <body>
        <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

        <h1>PDF.js 'Hello, world!' example</h1>

        <canvas id="the-canvas"></canvas>

        <script type="text/javascript">
            // If absolute URL from the remote server is provided, configure the CORS
            // header on that server.
            var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';

            // 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';

            // Asynchronous download of PDF
            var loadingTask = pdfjsLib.getDocument(url);
            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);
            });
        </script>
    </body>
</html>

pdf.js not loading pdf file

Question

1 answers

solution1
2 2020-01-01 02:45:49

pdf.js not loading pdf file

Question

1 answers

solution1 2 2020-01-01 02:45:49

solution1
2 2020-01-01 02:45:49