使用react-to-print时如何识别打印预览弹窗的点击按钮？

react-to-print本身没有直接提供区分打印预览弹窗中“打印”和“取消”的回调，但可以通过以下两种方法实现需求：

方法一：监听打印窗口关闭事件结合内置回调 #

利用onAfterPrint仅在用户完成打印时触发的特性，结合打印窗口的关闭事件来判断操作：

import React, { useRef, useState } from 'react';
import { useReactToPrint } from 'react-to-print';

const PrintableComponent = () => {
  const printContentRef = useRef();
  const [hasPrinted, setHasPrinted] = useState(false);

  const triggerPrint = useReactToPrint({
    content: () => printContentRef.current,
    onBeforeGetContent: () => {
      setHasPrinted(false);
    },
    onAfterPrint: () => {
      setHasPrinted(true);
      console.log('用户执行了打印操作');
    },
  });

  const handlePrintWindowClose = () => {
    // 延迟执行，确保onAfterPrint有足够时间触发
    setTimeout(() => {
      if (!hasPrinted) {
        console.log('用户取消了打印');
      }
    }, 500);
  };

  return (
    <div>
      <button onClick={() => {
        triggerPrint();
        // 获取打印窗口并监听关闭事件
        const printWindow = window.open('', '_blank');
        if (printWindow) {
          printWindow.addEventListener('beforeunload', handlePrintWindowClose);
        }
      }}>
        开始打印
      </button>
      <div ref={printContentRef} style={{ display: 'none' }}>
        {/* 这里是需要打印的内容 */}
        <h2>测试打印内容</h2>
        <p>这是一段用于打印测试的文本</p>
      </div>
    </div>
  );
};

export default PrintableComponent;

说明 #

• onAfterPrint只有在用户点击打印按钮并完成打印流程后才会触发，取消操作不会触发该回调。
• 延迟500ms是为了兼容浏览器的事件触发顺序，避免因onAfterPrint尚未执行就判定为取消操作。
• 部分浏览器可能会限制对打印窗口的访问，这种情况下可以改用方法二。

方法二：通过时间差判断操作 #

如果无法获取打印窗口，可以记录打印触发时间，结合定时器判断用户操作：

import React, { useRef, useState } from 'react';
import { useReactToPrint } from 'react-to-print';

const PrintableComponent = () => {
  const printContentRef = useRef();
  const [hasPrinted, setHasPrinted] = useState(false);
  const printStartTimestamp = useRef(null);

  const triggerPrint = useReactToPrint({
    content: () => printContentRef.current,
    onBeforeGetContent: () => {
      setHasPrinted(false);
      printStartTimestamp.current = Date.now();
      // 设置定时器，超时未触发onAfterPrint则判定为取消
      setTimeout(() => {
        if (!hasPrinted) {
          console.log('用户取消了打印');
        }
      }, 2000); // 可根据实际场景调整超时时间
    },
    onAfterPrint: () => {
      setHasPrinted(true);
      console.log('用户执行了打印操作');
    },
  });

  return (
    <div>
      <button onClick={triggerPrint}>开始打印</button>
      <div ref={printContentRef} style={{ display: 'none' }}>
        <h2>测试打印内容</h2>
        <p>这是一段用于打印测试的文本</p>
      </div>
    </div>
  );
};

export default PrintableComponent;

说明 #

• 该方法通过超时逻辑判断：如果用户在设定时间内未完成打印，就判定为取消操作。
• 超时时间需要根据实际场景调整，避免因用户在预览窗口停留过久而误判。

备选方案：自定义打印预览 #

如果需要完全精准的控制，可以自行实现打印预览界面，直接监听“打印”和“取消”按钮的点击事件，完全绕过浏览器默认的打印弹窗。这种方式灵活性最高，但需要额外开发预览界面。

内容的提问来源于stack exchange，提问作者Yunus Emre Arslan