使用 PdfEmbed 嵌入 PDF 文件

本方案通过仓库里的 PdfEmbed React 组件，将存储在 OSS 或其他静态资源服务中的 PDF 文件嵌入到 Docusaurus MDX 文档中。组件内部仍然使用 <iframe> 预览 PDF，同时提供“新窗口打开”和“下载 PDF”两个入口，避免每篇文档重复写内联 iframe 结构。

技术实现

1. 存储 PDF 文件：先把 PDF 上传至 OSS 或其他静态资源服务器，确保文件可以通过 URL 直接访问。
2. 使用 MDX 页面：只有 .mdx 页面可以直接 import 并渲染 React 组件。
3. 调用 PdfEmbed：当前组件已经位于 src/components/PdfEmbed/，不需要在每篇文档里重新实现 iframe。

实现步骤

1. 上传 PDF 文件至 OSS

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

   • PDF 文件地址：https://your-oss-domain.example/path/to/your-pdf-file.pdf

2. 确认可复用组件

   当前仓库已经有 src/components/PdfEmbed/index.js 和 src/components/PdfEmbed/styles.module.css。组件支持这些参数：

   • title：标题区显示的文件名或文档名。
   • src：PDF 的可访问 URL。
   • iframeTitle：iframe 的无障碍标题；不写时回退到 title。
   • desktopHeight：桌面端预览高度，默认 900。
   • mobileHeight：移动端预览高度，默认 clamp(360px, 62vh, 560px)。
   • hint：底部提示文案；传空值可隐藏。

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}}"
     iframeTitle="{{IFRAME_TITLE}}"
   />

示例演示

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

下面的 src 是远程静态资源 URL，不要求仓库里存在同名 PDF 文件。

ASC25_Preliminary_Round_Announcement.pdf

新窗口打开下载 PDF

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