PDF.js library not able to import due to disallowed MIME Type (“”)

Question

I am trying to use pdf.js and have problems when I import it from the local lib directory. The library can not be loaded due to disallowed MIME type. I imported the library using libman/cdnjs in VS2019, the files are there, the path is correct. It is exactly the same as the file on the Mozilla server, but it does not work.

When I import it directly from mozilla servers it works:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local PDF Viewer</title>
</head>
<body>
    <h1>Local PDF Viewer</h1>

    <!-- Add a button to toggle fullscreen -->
    <button id="fullscreenButton">Toggle Fullscreen</button>

    <!-- Add a canvas for rendering the PDF page -->
    <canvas id="pdfCanvas"></canvas>

    <script src="//mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>
    @*<script src="~/lib/pdfJs/pdf.mjs" type="module"></script>*@


    <script type="module">
        var { pdfjsLib } = globalThis;

        pdfjsLib.GlobalWorkerOptions.workerSrc="https://mozilla.github.io/pdf.js/build/pdf.worker.mjs";
        //pdfjsLib.GlobalWorkerOptions.workerSrc="./lib/pdfJs/pdf.worker.mjs";

        // Get a reference to the canvas element
        var pdfCanvas = document.getElementById("pdfCanvas");

        // Get a reference to the fullscreen button
        var fullscreenButton = document.getElementById("fullscreenButton");

        // Function to toggle fullscreen
        function toggleFullscreen() {
            if (document.fullscreenEnabled) {
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else {
                    pdfCanvas.requestFullscreen();
                }
            }
        }

        // Add a click event listener to the fullscreen button
        fullscreenButton.addEventListener("click", toggleFullscreen);

        // Function to display the PDF
        function displayPDF() {
            // Specify the path to your local PDF file
            //var pdfFilePath = "./css/37cd96d4-9cc2-4412-a9e7-5df60d90b150.pdf";
            var pdfFilePath = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf";

            // Initialize PDF.js
            pdfjsLib.getDocument(pdfFilePath).promise.then(function (pdfDoc) {
                // Set the initial zoom level and page number
                var pageNumber = 1;
                var scale = 1.5; // You can adjust the scale as needed

                // Fetch the first page
                return pdfDoc.getPage(pageNumber).then(function (page) {
                    var viewport = page.getViewport({ scale: scale });
                    pdfCanvas.width = viewport.width;
                    pdfCanvas.height = viewport.height;

                    // Render the page on the canvas
                    var renderContext = {
                        canvasContext: pdfCanvas.getContext("2d"),
                        viewport: viewport,
                    };

                    page.render(renderContext);
                });
            });
        }

        // Call the function to display the PDF
        displayPDF();
    </script>
</body>
</html>

i tried to find a difference between these 2 sources, but I cannot see any. I don’t know why the lib works directly from mozilla but does not from local cdnjs/libman package.

Do you have any idea what could cause this different behaviour?

Leave a Comment Cancel reply