Figurati, questa sera ho preso spunto per buttare giù un piccolo esempio con PDF.js spero ti possa essere d'aiuto.


codice:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test PDF.js</title>
    <style>
        #pdf_view {
            display: flex;
            flex-direction: column;
            width: 80%;
            height: 100vh;
            overflow-y: scroll;
        }

        @media screen and (max-width:800px) {
            #pdf_view {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div>
        <div id="pdf_view"></div>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
        <script>
            const pdfview = document.getElementById('pdf_view')

            const appState = {
                pdf: null,
                zoom: 1,
                url: './test.pdf'
            }

            pdfjsLib.getDocument(appState.url).then((pdf) => {
                appState.pdf = pdf
                for (let page = 1; page <= pdf.numPages; page++) {
                    renderPage(page)
                }
            })

            function renderPage(pageNumber) {
                appState.pdf.getPage(pageNumber).then((page) => {
                    const viewport = page.getViewport(appState.zoom)
                    canvas = document.createElement("canvas")
                    canvas.className = 'pdf_renderer'
                    canvas.width = viewport.width
                    canvas.height = viewport.height
                    pdfview.appendChild(canvas);

                    page.render({
                        canvasContext: canvas.getContext('2d'),
                        viewport: viewport
                    })
                })
            }
        </script>
</body>

</html>