React项目中获取window.print渲染的PDF文件对象并取消打印预览

核心思路 #

跳过浏览器原生window.print()的预览弹窗，直接将目标DOM区域按打印样式渲染为PDF文件对象，推荐使用html2pdf.js类库——它能直接识别并应用@media print样式规则，生成的PDF效果和原生打印预览一致，同时支持导出Blob/File对象供后续API调用。

步骤实现 #

1. 安装依赖

npm install html2pdf.js

2. React组件代码示例

import React, { useRef } from 'react';
import html2pdf from 'html2pdf.js';

const PdfGenerator = () => {
  // 绑定需要转PDF的内容区域
  const printContentRef = useRef(null);

  const handleGeneratePdf = async () => {
    // 配置项：确保应用打印样式，匹配原生打印效果
    const pdfOptions = {
      margin: 1,
      filename: 'print-output.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: {
        scale: 2, // 提高分辨率，避免模糊
        useCORS: true, // 处理跨域图片
        mediaType: 'print' // 强制应用打印媒体查询样式
      },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // 生成PDF并获取Blob对象
    const pdfBlob = await html2pdf()
      .set(pdfOptions)
      .from(printContentRef.current)
      .output('blob');

    // 将Blob转为File对象，用于后续API传输
    const pdfFile = new File([pdfBlob], 'print-output.pdf', { type: 'application/pdf' });

    // 这里可直接将pdfFile传入你的API请求
    console.log('生成的PDF文件对象:', pdfFile);
  };

  return (
    <div>
      <button onClick={handleGeneratePdf}>生成PDF</button>
      {/* 目标内容区域：包含你的打印样式 */}
      <div ref={printContentRef} className="print-target">
        <h1>订单详情</h1>
        <div className="order-info">
          <p>客户名称：XXX</p>
          <p>订单编号：20240520001</p>
        </div>
        {/* 更多内容... */}
      </div>
    </div>
  );
};

export default PdfGenerator;

3. 关键配置说明

• html2canvas.mediaType: 'print'：强制类库使用打印媒体查询渲染DOM，确保和window.print()的样式完全一致
• scale: 2：提升渲染分辨率，避免PDF内容模糊
• output('blob')：直接获取PDF的Blob数据，再通过File构造器转为可用于API传输的文件对象

备选方案（dom-to-image + jsPDF） #

如果需要更灵活的分页控制，可组合使用dom-to-image和jsPDF：

npm install dom-to-image jspdf

import React, { useRef } from 'react';
import domtoimage from 'dom-to-image';
import jsPDF from 'jspdf';

const PdfGenerator = () => {
  const printContentRef = useRef(null);

  const handleGeneratePdf = async () => {
    try {
      // 将DOM转为canvas，应用打印样式
      const canvas = await domtoimage.toCanvas(printContentRef.current, {
        style: { media: 'print' }
      });

      // 初始化PDF
      const pdf = new jsPDF('portrait', 'mm', 'a4');
      const imgWidth = 210;
      const pageHeight = 297;
      let imgHeight = (canvas.height * imgWidth) / canvas.width;
      let position = 0;

      // 添加第一页
      pdf.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight);
      imgHeight -= pageHeight;

      // 自动分页处理长内容
      while (imgHeight >= 0) {
        position = imgHeight - canvas.height;
        pdf.addPage();
        pdf.addImage(canvas, 'PNG', 0, position, imgWidth, canvas.height);
        imgHeight -= pageHeight;
      }

      // 转为File对象
      const pdfBlob = pdf.output('blob');
      const pdfFile = new File([pdfBlob], 'print-output.pdf', { type: 'application/pdf' });
      
      console.log('生成的PDF文件对象:', pdfFile);
    } catch (err) {
      console.error('PDF生成失败:', err);
    }
  };

  return (
    <div>
      <button onClick={handleGeneratePdf}>生成PDF</button>
      <div ref={printContentRef} className="print-target">
        {/* 你的内容 */}
      </div>
    </div>
  );
};

export default PdfGenerator;

注意事项 #

• 确保你的CSS中正确定义了@media print规则，类库会读取这些样式进行渲染
• 避免使用过于复杂的CSS动画或绝对定位，可能导致渲染异常
• 若内容包含跨域图片，需确保服务器允许跨域访问，或配置useCORS: true

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