如何在React.js中使用react-to-print库实现响应式PDF生成

首先明确问题根因：react-to-print默认复用当前设备视口的渲染规则生成打印内容，移动端下的响应式样式、viewport限制、浏览器对打印API的兼容差异都会导致内容渲染异常进而功能失效，可按以下方案逐一排查修复：

• 新增打印专属媒体查询，强制固定打印内容尺寸不受移动端响应式规则影响
  给待打印的容器添加专属类名，在全局CSS中新增如下规则：

  @media print {
    @page {
      /* 固定打印纸张为A4竖版，可按需调整为横版landscape */
      size: A4 portrait;
      margin: 0;
    }
    /* 强制打印内容使用A4宽度，覆盖移动端的响应式缩放、隐藏规则 */
    .print-content {
      width: 210mm !important;
      min-width: 210mm !important;
      display: block !important;
      overflow: visible !important;
    }
    /* 打印时隐藏所有非打印内容，避免移动端导航、操作按钮等元素干扰 */
    body > *:not(.print-content) {
      display: none !important;
    }
  }
  

• 打印前后临时切换viewport配置，避免移动端视口缩放影响内容渲染
  调用打印接口时通过生命周期钩子临时修改viewport为桌面端尺寸，打印完成后还原：

  const printRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => printRef.current,
    onBeforePrint: () => {
      const viewportMeta = document.querySelector('meta[name="viewport"]');
      // 保存原始viewport配置
      window.originalViewport = viewportMeta.content;
      // 临时修改为桌面端视口宽度
      viewportMeta.setAttribute('content', 'width=1200');
    },
    onAfterPrint: () => {
      // 还原原始viewport配置
      const viewportMeta = document.querySelector('meta[name="viewport"]');
      viewportMeta.setAttribute('content', window.originalViewport);
      delete window.originalViewport;
    },
    // 移除打印后残留的iframe，避免移动端浏览器内存溢出
    removeAfterPrint: true
  });
  

• 排查响应式样式冲突
  检查代码中所有max-width断点对应的样式规则，确认没有给待打印容器添加display: none、height: 0、overflow: hidden这类会导致内容不可见的配置，如有可通过@media print内的规则强制覆盖。
• 兼容移动端浏览器限制
  部分移动端浏览器会拦截非用户主动触发的打印事件，需保证触发打印的按钮点击事件没有被阻止冒泡，同时不要在异步回调（如接口请求回调）中间接调用打印方法，避免被浏览器判定为非用户操作拦截。

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