开源 JavaScript PDF 查看器库
用于查看 PDF 文档的免费开源 JavaScript 库。
什么是 PDFObject?
PDFObject 是一个免费的开源 JavaScript 库,用于在网页中嵌入 PDF 文档。它的工作原理是生成 HTML 嵌入元素,然后将其集成到 HTML 结构中。然后,嵌入元素会呈现 PDF 文档。PDFObject 本身并不是一个渲染器;相反,它专注于创建嵌入元素并将其放置在 HTML 中。它可以创建嵌入元素,以全尺寸或在网页的指定部分内显示 PDF。
以下是 PDFObject 的一些主要功能:
- 后备机制:PDFObject 具有后备机制,因此在浏览器不支持嵌入 PDF 的情况下,PDFObject 会自动激活后备逻辑,从而允许开发人员根据需要提供 PDF 链接或任何其他替代逻辑。
- PDF.js 集成:PDFObject 提供与 PDF.js 的可选集成,使开发人员能够嵌入 PDF,而不受浏览器默认 PDF 查看器的影响。当浏览器不支持在 HTML 中嵌入 PDF 文档时,此功能非常有用。
- PDF 打开参数:PDFObject 支持 Adobe 专有的 PDF 打开参数,允许开发人员指定 PDF 显示参数。这包括查看模式等选项和其他 Adobe 特定设置。所有这些参数都可以在此处找到。
PDFObject 入门
我们可以使用 npm 模块下载 PDFObject 库:
使用 NPM 安装
npm i pdfobject
在 HTML 中嵌入 PDF 并验证浏览器支持情况
我们可以使用 PDFObject 库将 PDF 文档嵌入 HTML。首先,我们将使用 PDFObject 库的 supportsPDFs 方法检查浏览器是否支持将 PDF 文档嵌入 HTML。如果它返回 true,表示它支持将 PDF 嵌入 HTML,那么我们将使用 embed("document_name.pdf","#elementid") 方法将 PDF 嵌入 HTML。此函数将 PDF 嵌入 HTML 中的特定元素中。对于全尺寸 PDF 嵌入,我们不会提及任何元素 ID,并将该方法调用为 embed("document_name.pdf")。但是,如果它返回 false,表示它不支持将 PDF 嵌入 HTML,那么我们将根据需要转向其他替代逻辑。查看以下代码片段了解详细信息:
输出
以下输出显示嵌入在 HTML 中的 PDF 文档:
创建后备机制
我们可以使用 PDFObject 在网页中嵌入 PDF 时建立回退机制,当浏览器不支持在 HTML 中嵌入 PDF 时,该机制将被激活。PDFObject 使用一个名为 fallbackLink 的参数,该参数在调用 embed 函数时包含备用逻辑。因此,如果浏览器不支持嵌入 PDF,则 fallbackLink 中的代码将在指定的 div 元素中执行。查看以下代码片段了解详细信息:
输出
输出截图显示了回退机制显示的内容。当浏览器不支持在 HTML 中嵌入 PDF 时,会激活回退机制。
使用 Adobe 的 PDF 打开参数嵌入 PDF
我们可以使用 PDFObject 库嵌入 PDF 以及一些打开参数。我们将使用 PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) 方法将 PDF 文档以及打开参数嵌入 HTML。这些 PDF 打开参数 包括打开 PDF 和滚动到特定页码等功能。查看以下代码片段了解详情:
输出
以下屏幕截图显示了嵌入在 HTML 中的 PDF 文档,其中包含附加参数,这些参数使嵌入元素在呈现后滚动到第 3 页:
通过集成 PDF.js 嵌入 PDF
我们知道 PDFObject 依赖于浏览器对在 HTML 中嵌入 PDF 的支持,但如果浏览器不支持,它确实提供了一种呈现 PDF 的替代方法。替代方法是将 PDF.js 与 PDFObject 集成。为了做到这一点,我们必须在服务器上设置 PDF.js,然后将 ForcePDFJS: true 和 PDFJS_URL: path/to/viewer.html/in/pdf.js 参数传递给 embed 函数。
注意:在下面的示例代码片段中,我们创建并启动了一个包含 PDF.js 库的服务器,因此 http://localhost:8888 指向 PDF.js 库。
输出
以下屏幕截图显示了通过将 PDFObject 与 PDF.js 集成呈现的 PDF 文档:
结论
总之,PDFObject 是一个易于使用的 JavaScript 库,用于在 HTML 中嵌入 PDF 文档。虽然它不作为渲染器运行,并且依赖于浏览器对嵌入元素的支持,这可能会导致不支持嵌入元素的浏览器中 UI 损坏等问题,但该库具有通过对嵌入元素的支持检测和回退机制解决此类问题的功能。我们还可以通过将 PDF.js 与 PDFObject 集成,在不支持嵌入元素的浏览器中呈现 PDF。尽管存在局限性,但 PDFObject 仍是一种有价值的工具,可用于在网页中嵌入和呈现 PDF 文档。