跳转到内容

PDFObject预览库

1. 简介

PDFObject 是一个轻量级、无依赖的 JavaScript 库，用于在 Web 页面中嵌入 PDF 文档。它通过检测浏览器对 PDF 的原生支持情况，自动生成 <embed> 标签，并提供平滑的优雅降级逻辑。

2. 基础使用

2.1. 引入资源

使用 CDN 引入最新版本的 PDFObject 脚本：

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

2.2. 定义容器

在 HTML 中声明一个承载 PDF 的 DOM 节点，并为其设置宽高：

<style>
  .pdf-container {
    width: 100%;
    height: 800px;
    border: 1px solid #ccc;
  }
</style>

<div id="my-pdf-container" class="pdf-container"></div>

2.3. 初始化嵌入

通过 JavaScript 调用 PDFObject.embed 方法：

// 参数 1: PDF 文件路径; 参数 2: 目标容器的选择器或 DOM 节点
PDFObject.embed("/assets/documents/sample.pdf", "#my-pdf-container");

3. 进阶配置项

支持通过第三个参数（配置对象）来自定义 PDF 的打开属性与降级展示：

const options = {
  // 控制 PDF 打开时的行为参数（基于 Adobe PDF Open Parameters）
  pdfOpenParams: {
    page: 1,             // 默认显示第一页
    zoom: '100',         // 缩放比例
    pagemode: 'thumbs',  // 侧边栏显示缩略图
    toolbar: 0           // 隐藏工具栏
  },
  // 当浏览器不支持直接预览时的降级 HTML 提示，[url] 会自动被替换为 PDF 文件路径
  fallbackLink: "<p>您的浏览器不支持在线预览该 PDF，您可以直接 <a href='[url]' target='_blank'>点击此处下载 PDF 文件</a> 查阅。</p>"
};

PDFObject.embed("/assets/documents/sample.pdf", "#my-pdf-container", options);

4. 参考资料