js读取pdf文件

%小样

于 2024-09-18 09:47:44 发布

阅读量333

点赞数 7

文章标签： javascript pdf html5

本文链接：https://blog.csdn.net/2301_78723495/article/details/142325166

版权

以下代码可以读取pdf文件并渲染到页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取 PDF 文件</title>
    <style>
        #pdfCanvas {
            border: 1px solid black;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>读取 PDF 文件</h1>
    <input type="file" id="fileInput" accept=".pdf">
    <canvas id="pdfCanvas"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.min.js"></script>
    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const fileReader = new FileReader();              
                fileReader.onload = function(e) {
                    const typedarray = new Uint8Array(e.target.result);                    
                    // 使用 PDF.js 解析 PDF 文件
                    pdfjsLib.getDocument(typedarray).promise.then(pdf => {
                        console.log('PDF loaded');                       
                        // 读取第一页
                        pdf.getPage(1).then(page => {
                            console.log('Page loaded');                           
                            const scale = 1.5; // 缩放比例
                            const viewport = page.getViewport({ scale: scale });                           
                            // 准备 canvas
                            const canvas = document.getElementById('pdfCanvas');
                            const context = canvas.getContext('2d');
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;                           
                            // 渲染 PDF 页面到 canvas
                            const renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            const renderTask = page.render(renderContext);                           
                            renderTask.promise.then(() => {
                                console.log('Page rendered');
                            });
                        });
                    });
                };              
                fileReader.readAsArrayBuffer(file);
            }
        });
    </script>
</body>
</html>

希望可以帮到你😁。