Search code examples
javascriptreactjsreact-to-print

NPM react-to-print fails to render text

I am adding support to my website for printing the current page. My website is built with React Js. I am using 'react-to-print', a NPM module, to print the current page. I am following instructions from this page. I am observing an intermittent issue where the text is not printed. Looks like this:

Browser Print Window when using react-to-print

Here is my invocation of the React-to-print UI component:

<ReactToPrint
  documentTitle={title || ''}
  content={onPrint}
  onAfterPrint={onAfterPrint}
  onBeforeGetContent={onBeforePrint}
  removeAfterPrint
  copyStyles
  trigger={() => (
    <div className="pdf-button">
      <div className="pdf-trigger">
        <PictureAsPdfOutlined />
        <div className="text">PDF Download</div>
        </div>
      </div>
    )}
  />

I have tried removing the 'removeAfterPrint' property and many various invocations with no luck. Is there some issue with this library preventing the correct rendering of React UI components?

Solution

  • Solved this issue by removing duplicate @font-face definitions for a custom font used within my application. Not sure "what" exactly was breaking; I did observe, however, that this issue was also occurring when I called window.print() from the console. The issue was not related to the react-to-print library.