PDF

大约 2 分钟

PDF 预览组件。

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

示例

默认 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 以指定其他位置。

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>
<!-- ... -->