React 18+TypeScript打印元素：动态组件转HTML字符串方法

1. 类型断言的正确性确认 #

你用(document.getElementById('ifmcontentstoprint') as HTMLIFrameElement).contentWindow解决TypeScript类型报错的方式是完全正确的——getElementById默认返回HTMLElement | null，TypeScript无法自动推断它是iframe元素，必须显式做类型断言。

2. 动态React组件转HTML字符串的方案 #

要把循环渲染的Accordion这类动态React组件转成HTML字符串，React官方提供了两个直接可用的工具方法：

方法一：用renderToStaticMarkup（打印场景推荐）

这个方法会生成不带React内部属性（如data-reactid）的干净HTML，非常适合静态打印需求。示例代码如下：

import { renderToStaticMarkup } from 'react-dom/server';

// 先定义你的列表项类型
type ListItem = { /* 替换成你的数据结构 */ };

const handlePrint = (list: ListItem[]) => {
  // 构造要打印的React组件结构
  const printContent = (
    <div>
      {list.map((item, i) => (
        <div className='ln-u-margin-bottom' key={i}>
          <Accordion className='ln-u-margin-bottom' data={item} />
        </div>
      ))}
    </div>
  );

  // 把React组件转成HTML字符串
  const htmlString = renderToStaticMarkup(printContent);

  // 获取iframe并写入内容
  const iframeWindow = (document.getElementById('ifmcontentstoprint') as HTMLIFrameElement).contentWindow;
  if (!iframeWindow) return;

  iframeWindow.document.open();
  // 写入完整HTML结构，必须引入组件依赖的样式
  iframeWindow.document.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <style>
          /* 复制组件用到的CSS样式 */
          .ln-u-margin-bottom { margin-bottom: 1rem; }
          /* 这里还要加上Accordion组件的所有样式 */
        </style>
      </head>
      <body>${htmlString}</body>
    </html>
  `);
  iframeWindow.document.close();
  iframeWindow.focus();
  iframeWindow.print();
};

方法二：用renderToString

这个方法会保留React的内部属性，适合后续需要做客户端hydrate的场景，但打印时会多一些冗余代码，纯打印需求不推荐使用，用法和renderToStaticMarkup完全一致，仅替换方法名即可。

3. 关键注意事项 #

• 样式必须单独引入：iframe是独立的文档环境，原页面的CSS不会自动生效，必须把组件依赖的所有样式写入iframe的<head>中，否则打印内容会没有样式。
• 组件要兼容静态渲染：确保Accordion组件不依赖window、document这类浏览器专属API——renderToStaticMarkup是在非浏览器环境执行的，如果组件中有这类代码，需要用useEffect在客户端处理，或者添加环境判断逻辑。
• 页面中需存在隐藏iframe：记得在组件里渲染一个隐藏的iframe用于承载打印内容：

  <iframe id="ifmcontentstoprint" style={{ display: 'none' }} />
  

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