PDF 预览方案

1. 简介

PDF 预览是 Web 开发中常见的功能，它允许用户在浏览器中查看和浏览 PDF 文件。然而，并不是所有的 PDF 预览解决方案都提供相同的功能和性能。因此，了解不同 PDF 预览解决方案的优缺点对于选择合适的解决方案非常重要。

2. 方案

2.1. PDF.js📦

推荐指数 ⭐ ⭐ ⭐ ⭐ ⭐

PDF.js 是一个开源的 PDF 预览解决方案，它使用 HTML5 的 Canvas 和 JavaScript 来渲染 PDF 文件。PDF.js 支持多种浏览器，并且可以与 Web 应用程序集成。用户可以自定义 PDF.js 的样式和行为，以满足特定的需求。社区比较活跃

示例：

实现 翻页、首尾页、分页跳转、搜索、调整页面比例等

pdfjs2.1.x demo

同上

pdfjs4.x demo

2.2. PDFObject

推荐指数 ⭐

PDFObject 是一个轻量级的 JavaScript 库，它使用 HTML5 的 object 标签来嵌入 PDF 文件。 对于复杂浏览器环境，根据不同的浏览器版本，pdfObject 会自动选择合适的 PDF 预览解决方案。

2.3. PDFJS-WebViewer

推荐指数 ⭐star⭐star:

PDFJS-WebViewer 是由 PDF.js 项目开发的，它是一个用于在 Web 浏览器中渲染和处理 PDF 文件的 JavaScript 库。它支持基本的 PDF 操作，如缩放、旋转、搜索、页面导航等。同时，它还提供了一些扩展功能，如文本选择、高亮和注释等功能。

用户可自行打包 pdfjs 或使用 pdfjs-dist 来构建 PDFJS-WebViewer。

2.4. 原生标签

推荐指数 ⭐ ⭐ ⭐ ⭐

使用 object 标签来嵌入 PDF 文件，使用 embed 标签来嵌入 PDF 文件，使用 iframed 标签来嵌入 PDF 文件。

缺陷：样式内容上不可控

2.5. vue-pdf-embed

推荐指数 ⭐ ⭐ ⭐

vue-pdf-embed 是一个 Vue.js 组件，用于在 Vue.js 应用程序中嵌入 PDF 文件。该组件使用 PDF.js 库来渲染 PDF 文件，并提供了多种选项和配置来定制 PDF 预览的样式和行为。

2.6. vue3-pdf-app

推荐指数 ⭐ ⭐ ⭐ :start:

100%还原了 PDF.js 的功能