如何为Docusaurus页面添加当前页PDF下载按钮？

完全可行，以下是几种成熟的实现方式：

一、使用Docusaurus专用插件 #

1. docusaurus-plugin-pdf #

这是专门为Docusaurus设计的PDF生成插件，支持单页或全站PDF导出，还能自动在页面添加下载按钮。

• 安装：

  npm install docusaurus-plugin-pdf --save-dev
  # 或
  yarn add docusaurus-plugin-pdf --dev
  

• 配置：在docusaurus.config.js的plugins数组中加入配置：

  module.exports = {
    plugins: [
      [
        'docusaurus-plugin-pdf',
        {
          path: '/docs/your-target-page', // 指定要生成PDF的页面路径
          outputPath: '/static/pdf/your-page.pdf', // PDF生成后的存放路径
          addDownloadButton: true, // 启用页面内自动添加下载按钮
        },
      ],
    ],
  };
  

• 注意：插件依赖Puppeteer，安装时会自动拉取，若出现依赖问题可手动安装puppeteer。

2. docusaurus-pdf-export #

轻量型单页PDF导出插件，支持自定义按钮样式与导出参数，配置更灵活。安装后可通过页面组件或Markdown中的自定义代码块添加触发按钮。

二、自定义实现（基于Puppeteer） #

如果插件无法满足个性化需求（比如自定义PDF排版、处理动态内容），可以用Puppeteer手动实现：

• 安装依赖：

  npm install puppeteer --save-dev
  

• 编写生成脚本（示例：scripts/generate-pdf.js）：

  const puppeteer = require('puppeteer');
  
  async function generatePDF(pageUrl, outputPath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(pageUrl, { waitUntil: 'networkidle2' });
    await page.pdf({
      path: outputPath,
      format: 'A4',
      printBackground: true, // 保留页面背景与样式
    });
    await browser.close();
  }
  
  // 可通过后端接口或构建命令触发该函数预生成PDF
  

• 页面中添加按钮，点击时触发下载预生成的PDF，或调用后端接口实时生成。

三、纯前端实现（html2pdf.js） #

无需服务端支持，直接在前端完成PDF生成：

• 在页面中引入html2pdf.js（可通过CDN或本地安装）
• 在Markdown页面添加自定义按钮与脚本：

  <button onclick="downloadPDF()">下载当前页面为PDF</button>
  <script>
    function downloadPDF() {
      // 定位Docusaurus页面的主内容容器
      const content = document.querySelector('#__docusaurus > main');
      html2pdf()
        .set({
          margin: 10,
          filename: `${window.location.pathname.split('/').pop()}.pdf`,
          image: { quality: 0.95 },
          html2canvas: { scale: 2 },
          jsPDF: { format: 'a4', orientation: 'portrait' }
        })
        .from(content)
        .save();
    }
  </script>
  

• 优点：零服务端成本；缺点：复杂页面样式、动态渲染内容的兼容性不如服务端方案。

内容的提问来源于stack exchange，提问作者Diogo Miranda