如何用JS实现通过URL/本地链接获取PDF页数并在HTML展示

问题分析 #

原代码仅适配本地文件读取逻辑，当输入改为文本链接时，inputElement.files[0]不存在导致逻辑中断；同时远程PDF需要通过URL直接加载，而非本地文件流方式。

修改后的完整代码 #

<html>
    <head>
        <title>统计PDF文档页数</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <h1 class="text-center">统计PDF文档页数</h1>
            <div class="form-group container">
                <input type="file" accept=".pdf" id="localPdf" class="form-control" placeholder="选择本地PDF文件"/>
                <br>
                <input type="text" id="remotePdf" class="form-control" placeholder="输入远程PDF链接（如Google Drive）"/>
                <br>
                <button onclick="getNumberOfPages()" class="btn btn-primary">获取页数</button>
            </div>
            <br><br>
            <h1 class="text-primary container" id="result"></h1>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
    <script>
        function getNumberOfPages() {
            const resultEl = document.getElementById('result');
            resultEl.innerHTML = '';

            // 处理本地PDF文件
            const localFile = document.getElementById('localPdf').files[0];
            if (localFile) {
                const fileReader = new FileReader();
                fileReader.onload = function() {
                    const typedarray = new Uint8Array(this.result);
                    const loadingTask = pdfjsLib.getDocument(typedarray);
                    loadingTask.promise.then(pdf => {
                        resultEl.innerHTML = `该PDF文档的页数为：${pdf.numPages}`;
                    }).catch(err => {
                        resultEl.innerHTML = `读取本地PDF失败：${err.message}`;
                    });
                };
                fileReader.readAsArrayBuffer(localFile);
                return;
            }

            // 处理远程PDF链接
            const remoteUrl = document.getElementById('remotePdf').value.trim();
            if (remoteUrl) {
                // 转换Google Drive链接为可直接加载的格式
                let processedUrl = remoteUrl;
                if (processedUrl.includes('drive.google.com/file/d/')) {
                    processedUrl = processedUrl.replace(/\/view\?usp=.*/, '/export?format=pdf');
                }

                const loadingTask = pdfjsLib.getDocument({
                    url: processedUrl,
                    cors: true
                });
                loadingTask.promise.then(pdf => {
                    resultEl.innerHTML = `该PDF文档的页数为：${pdf.numPages}`;
                }).catch(err => {
                    resultEl.innerHTML = `加载远程PDF失败：${err.message}`;
                });
                return;
            }

            resultEl.innerHTML = '请选择本地PDF文件或输入远程PDF链接';
        }
    </script>
</html>

关键修改说明 #

• 拆分输入方式：新增本地文件选择框与远程链接输入框，分别对应两种使用场景
• 适配Google Drive链接：将预览链接（/view?usp=sharing）转换为导出链接（/export?format=pdf），确保pdfjs能正常加载
• 添加错误处理：捕获文件读取与远程加载过程中的异常，给出明确提示
• 逻辑优先级：优先处理本地文件，再处理远程链接，避免冲突

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