PDF

大约 2 分钟

PDF 预览组件。

你可以使用此组件在 Markdown 中嵌入 PDF 阅读器。

示例

<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" />

<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" page="2" no-toolbar />

PDFJS 查看器

并非所有浏览器都支持嵌入 PDF 查看器 (如: 现在没有移动浏览器支持此功能)，因此我们添加了对 PDFJS 查看器的支持。

默认情况下，PDFJS 查看器是从 https://theme-hope-assets.vuejs.press/pdfjs/ 获取的。你可以在组件选项中自定义 componentOptions.pdf.pdfjs 以指定其他位置。

PDFJS 查看器

我们的 PDFJS 查看器仅供非商业用途的社区使用，要使用 PDFJS 查看器，你的 PDF 文件应包含允许 theme-hope-assets.vuejs.press 的 CORS 标头。

如果你不能满足上述条件，则需自行托管 PDFJS 查看器。为此，你应该从 https://github.com/mozilla/pdf.js/releases 下载最新的 PDFJS 查看器，然后将其复制到 .vuepress/public 文件夹。之后，在组件选项中将componentOptions.pdf.pdfjs 设置为 <BASE><public 文件夹内的相对路径>。

noToolbar 支持

默认的 PDFJS 查看器不支持自定义工具栏，如果你想添加这个功能的支持，你应该手动将以下代码添加到在 pdfjs 文件夹中的 web/viewer.html 的 <script src="viewer.js"></script> 行之前：

<!-- ... -->
<link rel="stylesheet" href="viewer.css" />

<!-- ========== 下面是你应该添加的内容 ============= -->

<!-- 添加对 toolbar=0 的支持 -->
<script>
  if (location.hash.includes("toolbar=0")) {
    const style = document.createElement("style");

    style.textContent = "#toolbarContainer { display: none; }";
    document.head.append(style);
  }
</script>

<!-- ========== 以上是你应该添加的 ============= -->

<script src="viewer.mjs"></script>
<!-- ... -->