Skip to main content

Embedding PDF Files With PdfEmbed

This approach uses the PdfEmbed React component in the repo to embed PDF files hosted on OSS or other static resource services into Docusaurus MDX documents. The component internally uses <iframe> for PDF preview, while providing "open in new tab" and "download PDF" links, so you don't need to repeat inline iframe boilerplate in every document.

Implementation Details​

  1. Store the PDF file: Upload the PDF to OSS or another static resource server. Make sure the file is accessible via URL.
  2. Use an MDX page: Only .mdx pages can directly import and render React components.
  3. Use PdfEmbed: The component already lives at src/components/PdfEmbed/. No need to re-implement iframe in every document.

Steps​

  1. Upload the PDF to OSS

    Upload your PDF file to OSS or another static hosting service and make sure it is accessible via URL. For example:

    • PDF URL: https://your-oss-domain.example/path/to/your-pdf-file.pdf

  2. Confirm the reusable component

    The repo already has src/components/PdfEmbed/index.js and src/components/PdfEmbed/styles.module.css. The component supports these props:

    • title: The file name or document name shown in the title area.
    • src: The accessible URL of the PDF.
    • iframeTitle: Accessibility title for the iframe; falls back to title if omitted.
    • desktopHeight: Preview height on desktop. Default: 900.
    • mobileHeight: Preview height on mobile. Default: clamp(360px, 62vh, 560px).
    • hint: Hint text at the bottom; pass an empty value to hide it.

  3. Create an MDX page

    Create a .mdx page in Docusaurus, for example your-pdf-name.mdx, and insert the PDF preview code.

  4. Add the component call

    Insert the following code into the .mdx file:

    ---
    title: {{PDF_TITLE}}
    description: {{PDF_DESCRIPTION}} online preview
    ---

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

    # {{PDF_TITLE}}

    {{PDF_DESCRIPTION}}

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

Live Demo​

This is the online preview version of the ASC25 Preliminary Round Announcement.

The src below is a remote static resource URL. No local PDF file with that name is required in the repo.

ASC25_Preliminary_Round_Announcement.pdf
新窗口打开下载 PDF

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