admin管理员组

文章数量:1394090

When I click on "Open PDF in Preview" after triggering the print dialog using the react-to-print component in my React app, the right side of the PDF gets cut off.

Setup: I am using react-to-print to generate a printable view. The ComponentToPrint is wrapped inside a hidden div and passed as a reference to content(). The print preview shows the full content, but when I open the PDF in Preview, part of the right side is missing.

Code Snippet: React-to-Print Implementation-

<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>
);

on mac os print dialog view
print preview

  • Tried setting width: 100% in ComponentToPrint to ensure it fits within the page.

  • Used overflow: hidden to prevent content from exceeding the page.

  • Tested different print margin settings.

Why is the right side of my PDF getting cut off when opened in Preview? How can I ensure the entire content is visible?
The entire content should appear properly formatted in the Preview PDF, just as it does in the print dialog.

Any insights would be appreciated!

本文标签：

版权声明：本文标题：reactjs - The right side of the PDF gets cut off when I click on Open PDF in Preview after triggering the print dialog in my Rea 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744735685a2622314.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。