使用 iframe 嵌入 PDF 文件

本方案通过 iframe 组件将存储在 OSS 或其他存储服务中的 PDF 文件嵌入到 Docusaurus 文档中，支持在线查看、下载和新窗口打开。

技术实现

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

实现步骤

上传 PDF 文件至 OSS

你需要将 PDF 文件上传至 OSS 或其他静态资源托管服务，并确保文件可以通过 URL 访问。例如：
- PDF 文件地址：https://your-oss-domain.com/docs/your-pdf-file.pdf
创建 MDX 页面

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

添加 iframe 代码

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

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

# {{PDF_TITLE}}

{{PDF_DESCRIPTION}}

<div style={{
  border: '1px solid var(--ifm-color-emphasis-300)',
  borderRadius: '16px',
  overflow: 'hidden',
  background: 'var(--ifm-background-surface-color)',
  margin: '1rem 0'
}}>
  <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '12px 16px',
    borderBottom: '1px solid var(--ifm-color-emphasis-300)'
  }}>
    <strong>{{PDF_TITLE}}</strong>
    <div style={{ display: 'flex', gap: '12px' }}>
      <a
        href="{{PDF_URL}}"
        target="_blank"
        rel="noopener noreferrer"
      >
        新窗口打开
      </a>
      <a
        href="{{PDF_URL}}"
        target="_blank"
        rel="noopener noreferrer"
      >
        下载 PDF
      </a>
    </div>
  </div>

  <iframe
    src="{{PDF_URL}}"
    title="{{PDF_TITLE}}"
    width="100%"
    height="900"
    style={{ border: 'none' }}
  />
</div>

> 如果页面内无法正常预览 PDF，请点击右上角“新窗口打开”。

示例演示

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

ASC25_Preliminary_Round_Announcement.pdf

新窗口打开

下载 PDF

如果页面内无法正常预览，请点击上方“新窗口打开”。

技术实现​

实现步骤​

示例演示​

技术实现

实现步骤

示例演示