React中实现指定Div生成PDF附加到表单文件输入框的方案咨询

核心思路 #

1. 用html2canvas将目标printable-div转为Canvas
2. 用jsPDF将Canvas内容生成PDF的Blob对象
3. 将Blob转为File对象，通过DataTransfer模拟文件选择行为，赋值给表单的input[type="file"]
4. 提交表单时用FormData携带文件和其他表单字段发送到后端

完整实现代码 #

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

const InquiryForm = () => {
  // 获取目标div和文件输入框的引用
  const printableRef = useRef(null);
  const fileInputRef = useRef(null);

  // 生成PDF并附加到文件输入框
  const handleGenerateAndAttachPDF = async () => {
    if (!printableRef.current) return;

    // 1. 将目标div转为canvas
    const canvas = await html2canvas(printableRef.current, {
      scale: 2, // 提高分辨率，避免PDF模糊
      useCORS: true // 如果div内有跨域图片需要开启
    });

    // 2. 用jsPDF生成PDF Blob
    const pdf = new jsPDF('p', 'mm', 'a4');
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (canvasHeight * pdfWidth) / canvasWidth;

    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdfWidth, pdfHeight);
    
    // 生成Blob而不是直接下载
    const pdfBlob = pdf.output('blob');

    // 3. 将Blob转为File对象
    const pdfFile = new File([pdfBlob], 'product-inquiry.pdf', { type: 'application/pdf' });

    // 4. 模拟文件选择，赋值给input[type="file"]
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(pdfFile);
    fileInputRef.current.files = dataTransfer.files;
  };

  // 提交表单到后端
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    try {
      const response = await fetch('/api/inquiry-submit', {
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        alert('询价提交成功');
        // 重置表单
        e.target.reset();
      } else {
        alert('提交失败，请重试');
      }
    } catch (err) {
      console.error('提交出错:', err);
      alert('提交出错，请检查网络');
    }
  };

  return (
    <div>
      {/* 产品配置展示区域 */}
      <div ref={printableRef} className="printable-div">
        {/* 这里放用户选择的产品配置信息 */}
        <h3>产品配置详情</h3>
        <p>产品型号：XXX</p>
        <p>配置选项：XXX</p>
        <p>价格：XXX</p>
      </div>

      {/* 联系表单 */}
      <form onSubmit={handleSubmit}>
        <div>
          <label>姓名：</label>
          <input type="text" name="name" required />
        </div>
        <div>
          <label>邮箱：</label>
          <input type="email" name="email" required />
        </div>
        <div>
          <label>询价单（自动生成）：</label>
          <input type="file" name="attachment" ref={fileInputRef} required />
        </div>
        {/* 点击该按钮生成PDF并附加到文件输入框，然后可以提交表单 */}
        <button type="button" onClick={handleGenerateAndAttachPDF}>生成询价单并填写表单</button>
        <button type="submit">提交询价</button>
      </form>
    </div>
  );
};

export default InquiryForm;

关键细节说明 #

• 分辨率优化：html2canvas的scale:2可以提升Canvas清晰度，避免PDF出现锯齿
• 跨域图片处理：如果目标div内包含跨域图片，需要开启useCORS: true，同时图片服务器需要配置CORS允许你的域名访问
• File对象创建：指定文件名product-inquiry.pdf和正确的MIME类型application/pdf，确保后端能正确识别
• 表单提交：必须用FormData来携带文件，不能用JSON格式，因为文件是二进制数据
• input赋值：由于input[type="file"]的files属性是只读的，必须通过DataTransfer对象来模拟文件选择，不能直接赋值

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