React项目中react-to-print生成PDF在Preview右侧内容截断问题

环境设置 #

• 使用react-to-print生成可打印视图，ComponentToPrint被包裹在隐藏容器中并作为引用传入content()
• 打印对话框预览显示完整内容，但在Mac Preview中打开PDF时右侧内容缺失
• 系统环境：MacOS

代码片段 #

React-to-Print实现代码 #

<ReactToPrint
    documentTitle={'Sample pdf'}
    trigger={() => <></>}
    content={() => componentRef.current}
    ref={printRef}
    onAfterPrint={() => {
      setStateData(prev => { return { ...prev, isPrintComponentRender: false, startRenderPrintComponent: false } });
    }}
    print={async (target) => {
      return new Promise<any>((resolve) => {
        target?.contentWindow?.print?.();
        resolve(true);
      });
    }}
    removeAfterPrint={true}
/>
<div style={{ display: 'none' }}>
    <ComponentToPrint ref={componentRef} footer={''}> 
        {renderPrintComponent} 
    </ComponentToPrint>
</div>

ComponentToPrint组件代码 #

return (
  <View ref={ref}>
    <table width="100%">
      <thead>
        <tr>
          <td ref={headerRef}>{renderHeader()}</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div className="content">{props.children}</div></td>
        </tr>
      </tbody>
    </table>
  </View>
);

已尝试方案 #

• 在ComponentToPrint中设置width: 100%确保内容适配页面
• 使用overflow: hidden防止内容超出页面
• 测试不同的打印边距设置

问题原因与解决方法 #

核心原因 #

Mac Preview对PDF页面尺寸、边距的解析逻辑和浏览器打印对话框存在差异：浏览器预览会自动做自适应调整，而Preview会严格按照PDF文件的实际页面边界裁剪内容。另外，用display: none包裹打印组件会导致尺寸计算异常，进一步加剧内容截断问题。

解决步骤 #

1. 添加打印专用CSS样式
   为打印视图设置明确的页面尺寸、边距，强制内容适配容器：

   @media print {
     body, html {
       margin: 0;
       padding: 0;
       width: 100%;
       height: 100%;
     }
     .print-container {
       width: 210mm; /* A4标准宽度 */
       min-height: 297mm; /* A4标准高度 */
       margin: 0 auto;
       padding: 10mm; /* 与打印边距匹配 */
       box-sizing: border-box;
     }
     table {
       table-layout: fixed !important; /* 强制表格按容器宽度布局 */
       width: 100% !important;
     }
     .content {
       overflow-wrap: break-word; /* 长文本自动换行 */
       word-break: break-all;
     }
   }
   

   同时修改ComponentToPrint的根容器：

   return (
     <div className="print-container" ref={ref}>
       <table width="100%">
         {/* 原有表格内容 */}
       </table>
     </div>
   );
   

2. 修复打印组件的渲染上下文
   替换display: none为不影响尺寸计算的隐藏方式，确保组件正常渲染：

   <div style={{ visibility: 'hidden', position: 'absolute', left: '-9999px', top: 0 }}>
       <ComponentToPrint ref={componentRef} footer={''}> 
           {renderPrintComponent} 
       </ComponentToPrint>
   </div>
   

3. 简化react-to-print打印逻辑
   移除自定义的print回调，使用组件默认逻辑，避免上下文丢失：

   <ReactToPrint
       documentTitle={'Sample pdf'}
       trigger={() => <></>}
       content={() => componentRef.current}
       ref={printRef}
       onAfterPrint={() => {
         setStateData(prev => ({ ...prev, isPrintComponentRender: false, startRenderPrintComponent: false }));
       }}
       removeAfterPrint={true}
   />
   

4. 调整Mac打印对话框设置
   在打印对话框中确认：

   • 选择正确的纸张尺寸（如A4）
   • 边距设置与CSS中的padding值匹配
   • 勾选“缩放以适应”选项

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