React中为打印特定Div的隐藏Iframe应用样式/样式表的解决方案

一、改进你当前的iframe打印方案 #

你现在的核心问题是只把目标Div的HTML内容复制到了iframe里，但没有同步对应的样式表，导致标题加粗这类样式无法生效。可以通过以下方式给iframe导入页面的样式：

修改你的handlePrint函数，在写入HTML时，把当前页面的所有样式标签（<style>）和样式表链接（<link rel="stylesheet">）都添加到iframe的<head>中：

function closePrint(this: any) { document.body.removeChild(this.__container__) }
const handlePrint = () => {
  let content = document.getElementById(`${notice ? "notice" : "article"}:${id}`)
  let oHideFrame = document.createElement("iframe")
  oHideFrame.style.position = "fixed"
  oHideFrame.style.display = "block"
  oHideFrame.style.visibility= "hidden"
  oHideFrame.style.right = "0"
  oHideFrame.style.bottom = "0"
  oHideFrame.style.width = "0"
  oHideFrame.style.height = "0"
  oHideFrame.style.border = "0"
  document.body.appendChild(oHideFrame)
  
  let pri = oHideFrame.contentWindow
  if (pri && content) {
    pri.document.open()
    // 把页面的样式表和style标签都导入到iframe的head里
    const pageStyles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
      .map(el => el.outerHTML)
      .join('')
    
    pri.document.write(`
      <!DOCTYPE html>
      <html>
        <head>${pageStyles}</head>
        <body>${content.innerHTML}</body>
      </html>
    `)
    pri.document.close()
    pri.onbeforeunload = closePrint
    pri.onafterprint = closePrint
    pri.focus()
    pri.print()
  }
}

这样iframe里的内容就会应用和页面一致的样式了。如果你的样式是CSS Modules或者有局部作用域，只要目标Div的样式在页面上能正常显示，这种方式也能同步过去。

另外，你也可以专门为打印场景编写@media print媒体查询样式，放在你的全局样式文件里，比如：

@media print {
  .article-title {
    font-weight: bold;
    /* 其他打印专属样式调整，比如隐藏不必要的元素 */
  }
}

这种方式可以进一步优化打印时的显示效果。

二、使用react-to-print替代方案（更省心） #

react-to-print是专门为React设计的打印工具，我之前在多个项目里用过，体验很不错——它能大幅简化打印逻辑，而且对样式的支持非常友好。

基本使用步骤：

1. 首先安装依赖：

npm install react-to-print --save
# 或者用yarn
yarn add react-to-print

2. 在你的组件中集成react-to-print：

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

// 封装可打印的内容组件
const PrintableContent = React.forwardRef(({ notice, id }, ref) => {
  return (
    <div ref={ref} id={`${notice ? "notice" : "article"}:${id}`}>
      {/* 你的文章内容，比如标题、正文等 */}
      <h1 className="article-title">这是文章标题</h1>
      <p className="article-content">正文内容...</p>
    </div>
  );
});

const SingleArticlePage = ({ notice, id }) => {
  const printableRef = useRef(null);

  return (
    <div>
      {/* 要打印的内容组件 */}
      <PrintableContent ref={printableRef} notice={notice} id={id} />
      
      {/* 打印触发按钮 */}
      <ReactToPrint
        trigger={() => <button>打印文章</button>}
        content={() => printableRef.current}
        documentTitle={notice ? "通知" : "文章"}
        onAfterPrint={() => alert('打印完成')}
      />
    </div>
  );
};

关于样式加载的问题：

react-to-print会自动捕获目标组件相关的所有样式——不管是全局样式、CSS Modules、内联样式还是styled-components这类CSS-in-JS方案，只要你的组件在页面上能正确显示样式，打印时基本都会正常加载。

如果遇到特殊情况（比如动态加载的样式），可以用onBeforeGetContent钩子来确保样式加载完成后再触发打印：

<ReactToPrint
  trigger={() => <button>打印文章</button>}
  content={() => printableRef.current}
  onBeforeGetContent={() => {
    // 这里可以等待动态样式加载完成，比如返回一个Promise
    return new Promise(resolve => setTimeout(resolve, 500));
  }}
/>

两种方案都能解决你当前的样式问题，react-to-print更适合React项目的开发模式，代码更简洁易维护；如果你想继续用自己的iframe方案，修改后的代码也能同步样式。

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