前端面试：如何实现预览 PDF 文件？

news2025/3/14 14:11:33

在前端开发中，实现 PDF 文件的预览是一个常见需求，尤其是在应用程序中需要用户查看文档时。以下是几种常见的方法，可以用来实现在网页中预览 PDF 文件：

方法一：使用 <iframe> 标签

1. 基本实现

最简单的方式是使用 HTML 的 <iframe> 元素，可以直接在网页中嵌入 PDF 文件。如下所示：

<iframe src="path/to/your/file.pdf" width="100%" height="600px" frameborder="0"></iframe>

优点：
- 简单易用，只需提供 PDF 的 URL。
- 支持多种浏览器。
缺点：
- 不同浏览器对 PDF 的嵌入支持可能略有不同，有些可能不支持完全互动。
- 样式和功能有限，无法自定义用户界面。

方法二：使用 PDF.js

如果需要更复杂的功能（如缩放、搜索、表单填写等），Adobe 的 PDF.js 是一个非常流行的库，可以用来在浏览器中渲染 PDF。

1. 引入 PDF.js

首先，引入 PDF.js。可以通过 CDN 或下载库文件进行引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

2. 创建预览容器

在 HTML 中创建一个容器，用于显示 PDF：

<div id="pdf-viewer" style="overflow: auto; width: 100%; height: 600px;"></div>

3. 加载 PDF 文件

使用 JavaScript 加载 PDF 文件并将其渲染到指定容器中：

const url = 'path/to/your/file.pdf'; // PDF 文件的 URL 



const pdfViewer = document.getElementById('pdf-viewer'); 



pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'; 



pdfjsLib.getDocument(url).promise.then(pdf => { 

    const numPages = pdf.numPages; 

    for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) { 

        pdf.getPage(pageNumber).then(page => { 

            const scale = 1.5; // 缩放比率 

            const viewport = page.getViewport({ scale }); 



            // 创建一个 <canvas> 元素 

            const canvas = document.createElement('canvas'); 

            const context = canvas.getContext('2d'); 

            canvas.width = viewport.width; 

            canvas.height = viewport.height; 



            // 将其添加到 PDF 预览容器 

            pdfViewer.appendChild(canvas); 



            // 渲染 PDF 页面 

            const renderContext = { 

                canvasContext: context, 

                viewport: viewport 

            }; 

            page.render(renderContext); 

        }); 

    } 

}).catch(error => { 

    console.error('Error loading PDF: ', error); 

});

优点：
- 提供全面的 PDF 功能，例如缩放和导航。
- 自定义界面。
缺点：
- 需要额外的库或应用程序支持。
- 对于大文件，加载时间较长。

方法三：使用第三方服务

还有一些第三方服务（如 Google Docs Viewer 或其他在线 PDF 查看器）可以提供 PDF 预览功能。这种方式通常涉及将 PDF 传递给在线服务，并使用其提供的 URL 进行展示。例如，使用 Google Docs Viewer：

<iframe 

  src="https://docs.google.com/gview?url=https://example.com/path/to/your/file.pdf&embedded=true" 

  style="width:100%; height:600px;" 

></iframe>