js预览pdf的组件带有分页点击分页事件javascript和vue可用

本文链接：https://blog.youkuaiyun.com/webnoties/article/details/135267173

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.js"></script>
</head>
<body>
<div style="padding:20px;boder:1px solid #ff0000;">
    <div id="pdfViewer">
        
    </div>
	
	<input type="number" id="pageNumberInput" placeholder="输入页码">
        <button onclick="goToPage()">跳转</button>
		
    <button onclick="prevPage()">上一页1</button>
    <button onclick="nextPage()">下一页2</button>
</div>

    <script>
        const pdfViewer = document.getElementById('pdfViewer');
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        const pdfPath = 'https://a.cn/a.pdf';
        let currentPage = 1;

        pdfjsLib.getDocument(pdfPath).promise.then((pdfDocument) => {
            renderPage(pdfDocument, currentPage);
        });

        function renderPage(pdfDocument, pageNumber) {
            pdfDocument.getPage(pageNumber).then((pdfPage) => {
                const canvas = document.createElement('canvas');
                pdfViewer.innerHTML = '';
                pdfViewer.appendChild(canvas);
                const context = canvas.getContext('2d');

                const viewport = pdfPage.getViewport({ scale: 1.5 });
                canvas.width = viewport.width * 0.5;
                canvas.height = viewport.height * 0.5;

                pdfPage.render({ canvasContext: context, viewport: viewport });
            });
        }

        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                pdfjsLib.getDocument(pdfPath).promise.then((pdfDocument) => {
                    renderPage(pdfDocument, currentPage);
					console.log("currentPage:",currentPage);
                });
            }
        }

        function nextPage() {
            pdfjsLib.getDocument(pdfPath).promise.then((pdfDocument) => {
                if (currentPage < pdfDocument.numPages) {
                    currentPage++;
                    renderPage(pdfDocument, currentPage);
					console.log("currentPage:",currentPage);
                }
            });
        }

        function goToPage() {
            const pageNumberInput = document.getElementById('pageNumberInput');
            const pageNumber = parseInt(pageNumberInput.value);

            if (!isNaN(pageNumber) && pageNumber > 0) {
                pdfjsLib.getDocument(pdfPath).promise.then((pdfDocument) => {
                    if (pageNumber <= pdfDocument.numPages) {
                        currentPage = pageNumber;
                        renderPage(pdfDocument, currentPage);
						console.log("currentPage:",currentPage);
                    }
                });
            }
        }
    </script>
</body>
</html>