React点击按钮导出部分页面内容为可选中PDF的实现方法咨询

直接使用jspdf v2.x以上版本即可满足所有需求，无需依赖其他库，也不需要修改现有业务组件结构。

实现步骤 #

• 第一步：安装依赖
  命令行执行：npm install jspdf 或 yarn add jspdf
• 第二步：绑定导出区域ref
  给需要导出的组件外层套一个DOM节点，绑定React ref标记导出范围，原有组件内部代码无需调整。
• 第三步：编写点击触发的导出逻辑
  所有导出逻辑封装在按钮的onClick回调中，仅点击按钮时才会触发，无额外触发入口。

完整代码示例 #

import React, { useRef } from 'react';
import jsPDF from 'jspdf';

function YourPageComponent() {
  // 绑定要导出的区域ref
  const exportAreaRef = useRef(null);

  const handleCreatePdf = () => {
    const exportNode = exportAreaRef.current;
    if (!exportNode) return;

    // 初始化PDF实例，参数依次为：方向(p纵向/l横向)、单位、纸张尺寸
    const pdf = new jsPDF('p', 'mm', 'a4');

    pdf.html(exportNode, {
      // 导出完成后的回调，触发下载
      callback: (pdfInstance) => {
        pdfInstance.save('自定义导出文件名.pdf');
      },
      // PDF内边距
      x: 10,
      y: 10,
      // 内容宽度，A4总宽210mm，左右各留10mm边距
      width: 190,
      // 适配原页面元素宽度，避免样式错乱
      windowWidth: exportNode.scrollWidth,
      html2canvas: {
        // 提升导出清晰度，不影响文本可选性
        scale: 2,
        // 支持导出跨域图片（需对应图片服务配置CORS）
        useCORS: true
      }
    })
  }

  return (
    <div>
      {/* 要导出的指定区域，内部可放任意现有React组件，无需修改 */}
      <div ref={exportAreaRef} className="export-area">
        <h2>导出文档标题</h2>
        <p>这段文本导出到PDF后可直接选中复制</p>
        {/* 其他任意业务组件 */}
      </div>

      {/* 其他不需要导出的页面内容 */}
      <div className="other-content">
        <p>这部分内容不会被导出到PDF</p>

        {/* 触发导出的按钮 */}
        <button onClick={handleCreatePdf}>创建PDF文档</button>
      </div>
    </div>
  )
}

export default YourPageComponent;

常见优化配置 #

• 分页控制：给需要强制分页的元素添加CSS样式 page-break-after: always; 即可自动识别分页
• 样式适配：可通过@media print媒体查询编写专属于导出场景的样式，不会影响页面正常展示效果
• 自定义字体：需要特殊字体的话可通过pdf.addFont()方法导入字体文件，避免字体 fallback

内容的提问来源于stack exchange，提问作者Long Doan