React-to-print在Ionic React应用中打印空白问题求助

Ionic的布局样式和组件生命周期特性可能导致react-to-print无法正确捕获目标组件内容，以下是几种可行的修复方案：

1. 确保打印组件在DOM中持续存在（视口外隐藏） #

Ionic的路由优化机制可能会隐藏或卸载非活跃视图内的组件，导致react-to-print无法捕获内容。可以将打印组件移到视口外，保持DOM存在但不影响页面显示：

修改Print组件：

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

const Print = () => {
  const componentRef:any = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      {/* 通过绝对定位将组件移出视口，确保DOM持续存在 */}
      <ComponentToPrint 
        ref={componentRef} 
        style={{ 
          position: 'absolute', 
          left: '-9999px', 
          top: '-9999px', 
          display: 'block' 
        }} 
      />
    </div>
  );
};

export default Print

2. 切换到useReactToPrint钩子API #

组件式的ReactToPrint在框架环境下兼容性不如钩子API，改用钩子方式可提升稳定性：

Print组件修改为：

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';
import { ComponentToPrint } from './ComponentToPrint';

const Print = () => {
  const componentRef = useRef<HTMLDivElement>(null);
  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
    // 强制设置打印页面基础样式，避免Ionic样式覆盖
    pageStyle: `
      @media print {
        body { margin: 2rem; }
        div { visibility: visible; }
      }
    `,
  });

  return (
    <div>
      <button onClick={handlePrint}>Print this out!</button>
      <ComponentToPrint ref={componentRef} style={{ position: 'absolute', left: '-9999px' }} />
    </div>
  );
};

export default Print

ComponentToPrint修正类型定义：

import React from 'react'

export const ComponentToPrint = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
  return (
    <div ref={ref}>My cool content here!</div>
  );
});

3. 覆盖Ionic的打印样式 #

Ionic全局样式会在打印时重置元素的display和visibility属性，需要在全局样式中添加打印专用规则：

在src/global.css中添加：

@media print {
  ion-app, ion-router-outlet, ion-content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .print-target {
    visibility: visible !important;
    display: block !important;
  }
}

给ComponentToPrint添加类名：

export const ComponentToPrint = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
  return (
    <div ref={ref} className="print-target">My cool content here!</div>
  );
});

4. 规范Ionic页面结构 #

确保打印组件所在的路由页面遵循Ionic标准结构，包裹在IonPage和IonContent中，避免布局异常：

创建BarcodePage页面组件：

import { IonContent, IonPage } from '@ionic/react';
import Print from './Print';

const BarcodePage = () => {
  return (
    <IonPage>
      <IonContent>
        <Print />
      </IonContent>
    </IonPage>
  );
};

export default BarcodePage;

更新App组件路由：

<Route path="/barcode" exact={true}>
  <BarcodePage/>
</Route>

优先尝试方案1和方案2的组合，这两个方案直接解决了组件捕获和样式冲突的核心问题。

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