React点击按钮将多组件转为PDF并保存的实现方法

嘿，作为React新手碰到这个需求完全没问题，我给你捋个简单靠谱的实现思路——咱可以用html2canvas把Card里的DOM内容转成图片，再用jsPDF把图片生成PDF文件，两步就搞定！

步骤1：安装必要依赖 #

首先得装两个工具包，打开终端跑命令：

npm install html2canvas jspdf --save
# 或者用yarn的话
yarn add html2canvas jspdf

步骤2：给目标Card添加Ref #

要把Card里的内容转成PDF，首先得获取到这个Card的DOM元素。在你的类组件里创建一个ref，然后绑定到Card上，再写个触发PDF生成的按钮。

完整修改后的代码示例 #

import React, { Component } from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

class DashboardPage extends Component {
  constructor(props) {
    super(props);
    // 创建ref用于获取Card的DOM节点
    this.cardRef = React.createRef();
  }

  // 生成并保存PDF的核心函数
  generatePDF = () => {
    const cardElement = this.cardRef.current;
    if (!cardElement) return;

    // 用html2canvas捕获Card内的所有内容
    html2canvas(cardElement, {
      scale: 2, // 放大2倍，让生成的PDF更清晰
      useCORS: true // 如果组件里有跨域图片，需要开启这个配置
    }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      // 创建A4尺寸的纵向PDF实例
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgWidth = 210; // A4纸宽度（单位：mm）
      const pageHeight = 297; // A4纸高度（单位：mm）
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;
      let position = 0;

      // 把捕获到的图片添加到PDF第一页
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      // 如果内容超过一页，自动分页添加
      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      // 保存PDF，这里可以自定义文件名
      pdf.save('dashboard-report.pdf');
    });
  };

  render() {
    const { classes } = this.props;
    return (
      <div>
        {/* 添加导出PDF的按钮，样式可以自己调整 */}
        <button onClick={this.generatePDF} style={{ marginBottom: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}>
          导出为PDF
        </button>
        {/* 给Card绑定ref，方便获取DOM */}
        <Card ref={this.cardRef}>
          <ProfileHeader {...this.state}/>
          <ContentLeft {...this.state}/>
          <ContentRight {...this.state}/>
          <ContentLeft1 {...this.state}/>
          <ContentRight1 {...this.state}/>
          <ProjectTopic {...this.state}/>
          <ProjectContent {...this.state}/>
          <ProjectTopic1 {...this.state}/>
          <ProjectContent1 {...this.state}/>
          <ProjectTopic2 {...this.state}/>
          <ProjectContent2 {...this.state}/>
        </Card>
      </div>
    );
  }
}

一些实用小提示 #

• scale:2是为了提升PDF清晰度，你可以根据需求调整数值；
• 如果组件里有跨域图片，除了开启useCORS: true，还要确保图片服务器配置了跨域允许；
• 文件名可以自定义，比如把dashboard-report.pdf换成你需要的名称；
• 代码里已经处理了长内容自动分页的逻辑，不用担心内容超出一页的问题。

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