跳到主要内容

使用 iframe 嵌入 PDF 文件

本方案通过 iframe 组件将存储在 OSS 或其他存储服务中的 PDF 文件嵌入到 Docusaurus 文档中，支持在线查看、下载和新窗口打开。 为了减少移动端布局问题，推荐把重复的 iframe 结构抽成可复用组件。

技术实现​

  1. 存储 PDF 文件：首先确保你的 PDF 文件已上传至 OSS 或其他静态资源服务器，确保文件可以通过 URL 访问。
  2. 使用 MDX 页面：Docusaurus 支持 MDX 格式，可以将 React 组件嵌入到 Markdown 中。我们将在 MDX 页面中使用自定义的 PdfEmbed 组件展示 PDF 文件。
  3. 实现嵌入：在组件内部使用 <iframe> 标签直接嵌入 PDF，确保 PDF 的 URL 通过 src 属性传递。

实现步骤​

  1. 上传 PDF 文件至 OSS

    你需要将 PDF 文件上传至 OSS 或其他静态资源托管服务，并确保文件可以通过 URL 访问。例如：

    • PDF 文件地址：https://your-oss-domain.com/docs/your-pdf-file.pdf

  2. 创建可复用组件

    在 src/components 下创建一个 PdfEmbed 组件，统一处理标题区、按钮区和移动端样式。这样后续多个 PDF 页面可以直接复用，不用重复写内联样式。

  3. 创建 MDX 页面

    在 Docusaurus 中创建一个 .mdx 页面，例如 your-pdf-name.mdx，并在该页面中插入 PDF 预览代码。

  4. 添加组件调用代码

    在 .mdx 文件中插入如下代码：

    ---
    title: {{PDF_TITLE}}
    description: {{PDF_DESCRIPTION}} 在线预览
    ---

    import PdfEmbed from '@site/src/components/PdfEmbed';

    # {{PDF_TITLE}}

    {{PDF_DESCRIPTION}}

    <PdfEmbed
      title="{{PDF_TITLE}}"
      src="{{PDF_URL}}"
    />

示例演示​

这是 ASC25 Preliminary Round Announcement 的在线预览版本。

ASC25_Preliminary_Round_Announcement.pdf
新窗口打开下载 PDF

如果手机上内嵌预览仍无法正常纵向滚动，请使用“新窗口打开”或“下载 PDF”。