How should i handle large data to print? about react-to-print HOT 8 CLOSED

from react-to-print.

Hey there. I'm not sure I fully understand your concern. Are you trying to avoid showing all the pages in the print preview window opened by the browser? I don't think that's possible to my knowledge, though it's generally pretty performant.

In terms of generating the content, you can pass a Promise to the onBeforeGetContent prop so that will cause react-to-print to wait to print until you resolve the promise, and during that time you can generate the temporary content for printing that may not display on the main page.

Does that answer your question?

from react-to-print.

from react-to-print.

Ah. onBeforeGetContent is what you want I think. It would let you only render what you want to print when the print is happening, that way you don't need to have it rendered and hidden when not printing. Does that make sense?

from react-to-print.

from react-to-print.

Ah. onBeforeGetContent is what you want I think. It would let you only render what you want to print when the print is happening, that way you don't need to have it rendered and hidden when not printing. Does that make sense?

how would you use this? like you still needs to pass the ref to the content property right?

Edit: Is this how it's supposed to be used

function App() {
  const [print, setPrint] = useState(false);
  const printRef = useRef<HTMLDivElement | null>(null);
  return (
    <div>
      {print && <Template ref={printRef} />}
      <ReactToPrint
        trigger={() => <button>Print</button>}
        content={() => printRef.current}
        onBeforeGetContent={() => {
          setPrint(true);
          return Promise.resolve();
        }}
        onAfterPrint={() => {
          setPrint(false);
          return Promise.resolve();
        }}
      />
    </div>
  );
}

from react-to-print.

That's basically right! Recall that setting state is async though, so it's a bit more complicated to know when the state has actually been set:

function App() {
  const [print, setPrint] = useState(false);
  const onBeforeGetContentResolveRef = useRef();
  const printRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    // Wait for the state update
    if (onBeforeGetContentResolveRef.current && print === true) {
      onBeforeGetContentResolveRef.current(); // Resolve the promise
      onBeforeGetContentResolveRef.current = undefined;
    }
  }, [print])

  return (
    <div>
      {print && <Template ref={printRef} />}
      <ReactToPrint
        trigger={() => <button>Print</button>}
        content={() => printRef.current}
        onBeforeGetContent={() => {
          setPrint(true);
          return new Promise((resolve) => {
            onBeforeGetContentResolveRef.current = resolve;
          });
        }}
        onAfterPrint={() => {
          setPrint(false);
        }}
      />
    </div>
  );
}

In the old world you could do this with the callback function from seState that runs after the state is applied, but they didn't add that into the functional component/hook world unfortunately

from react-to-print.

@AlejandroSanchez90 circling back here, did the above work for you?

from react-to-print.