React实现浏览器打印指定内容，告别浏览器杂乱打印烦恼

2023-11-02 00:28:37

前言

在日常开发中，我们时常需要打印某些网页上的内容。但是，浏览器默认的打印行为往往会将整个网页内容全部打印出来，这不仅浪费纸张，也给用户带来了困扰。因此，掌握在React中实现浏览器打印指定内容的方法尤为重要，以便灵活地控制打印的内容。

方法介绍

React实现浏览器打印指定内容的思路是，通过构建一个隐藏的元素（该元素包裹需打印的内容），当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复原来的页面布局。具体步骤如下：

构建一个隐藏的元素，将需打印的内容作为该元素的子元素。
监听打印事件，如window.onafterprint。
当打印事件触发时，隐藏页面其他不需要打印的元素。
将需打印的元素追加到body中。
打印页面。
打印完成后，恢复原来的页面布局。

代码示例

import React, { useEffect, useRef } from "react";

const PrintContent = ({ content }) => {
  const printRef = useRef();

  useEffect(() => {
    window.onafterprint = () => {
      // 打印完成后，恢复原来的页面布局
      document.body.removeChild(printRef.current);
    };
  }, []);

  const handlePrint = () => {
    // 隐藏页面其他不需要打印的元素
    const elementsToHide = document.querySelectorAll(".no-print");
    elementsToHide.forEach((element) => {
      element.style.display = "none";
    });

    // 将需打印的元素追加到body中
    document.body.appendChild(printRef.current);

    // 打印页面
    window.print();
  };

  return (
    <div ref={printRef} className="print-content">
      {content}
    </div>
  );
};

export default PrintContent;