如何将Web URL加载PDF改为通过按钮选择本地PDF文件？

需求说明 #

原Demo通过固定Web URL加载PDF并支持平移缩放，现需修改为通过「Select Pdf」按钮选择本地计算机中的PDF文件进行加载预览。

修改后的完整代码 #

HTML 部分 #

<button onclick="select_pdf()">Select Pdf</button>
<!-- 隐藏的文件选择输入，通过按钮触发 -->
<input type="file" id="pdf-file-input" accept=".pdf" style="display: none;">

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>
<div id="div-container">
  <canvas id="the-canvas"></canvas>
</div>

CSS 部分 #

#the-canvas {
  direction: ltr;
  transform-origin: top left;
}
#div-container {
  width: 400px;
  height: 400px;
  overflow: hidden; /* 防止PDF超出容器时显示滚动条，配合panzoom使用 */
}

JavaScript 部分 #

var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var PDFRenderingInProgress = false
var pdfDoc = null
var canvas = document.getElementById('the-canvas')
var ctx = canvas.getContext('2d');
var container = document.getElementById("div-container")
var fileInput = document.getElementById("pdf-file-input")

var wheelTimeoutHandler = null;
var wheelTimeout = 250 //ms

function renderPage(scale) {
    if (!pdfDoc) return;
    pdfDoc.getPage(1).then(function(page) {
        var viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        if (!PDFRenderingInProgress) {
            PDFRenderingInProgress = true
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function() {
                PDFRenderingInProgress = false
            })
        }
  });
}

function zoomWithWheel(event) {
    panzoom.zoomWithWheel(event)
    clearTimeout(wheelTimeoutHandler);
    wheelTimeoutHandler = setTimeout(function() {
        canvas.style.transform = "scale("+1/panzoom.getScale()+")"
        if (pdfDoc)
            renderPage(panzoom.getScale());
    }, wheelTimeout)
}

// 初始化panzoom
var panzoom = Panzoom(container)
container.parentElement.addEventListener('wheel', zoomWithWheel)

// 本地文件选择相关逻辑
function select_pdf(){
    // 触发文件选择对话框
    fileInput.click();
}

// 监听文件选择事件
fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file || file.type !== 'application/pdf') {
        alert("请选择有效的PDF文件");
        return;
    }

    // 将文件读取为ArrayBuffer
    const reader = new FileReader();
    reader.onload = function(event) {
        const arrayBuffer = event.target.result;
        // 加载本地PDF文件
        pdfjsLib.getDocument({data: arrayBuffer}).promise.then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            // 重置缩放比例为1，然后渲染第一页
            panzoom.reset();
            renderPage(1);
        }).catch(function(error) {
            console.error("加载PDF失败:", error);
            alert("加载PDF文件失败，请检查文件是否损坏");
        });
    };
    reader.readAsArrayBuffer(file);
});

关键修改说明 #

• 新增隐藏文件输入：添加了一个type="file"的隐藏输入框，指定仅接受PDF文件，通过按钮点击触发选择操作
• 实现文件选择逻辑：select_pdf函数触发文件选择对话框，当用户选择文件后，通过FileReader将文件读取为ArrayBuffer格式（pdf.js支持的输入格式之一）
• 替换PDF加载方式：将原来通过URL加载的代码替换为读取本地文件的逻辑，调用pdfjsLib.getDocument({data: arrayBuffer})加载本地PDF
• 优化用户体验：添加文件类型校验、加载失败提示，同时在加载新PDF时重置panzoom的缩放状态

内容的提问来源于stack exchange，提问作者James Tan