How to fix style when i print with react-to-print?

Question

i have a problem when i will print using react-to-print, that problem is with style of page, when i print the html, it print like:

when i print

and i dont want that, i want to print like (but without the buttons)

enter image description here

but i dont know how do.

in my code y put the next:

handler Print:

const handlerPrint = useReactToPrint({
     documentTitle: `Reporte de Textiles- ${reporte}`,
     content: () => componentRef.current,
     bodyClass:'', //i dont exactly know what put here
     trigger: async (event) => { console.log(event) },
     pageStyle:'', //i don know what put here
     copyStyles: true,
     onAfterPrint: (event) => {
         setReporte("")
         // code when is finish
     }
    })

do you have any idea to solve it? thanks

Answer 1

According to the reactToPrint package documentation, you can set the isPrinting flag in the onBeforeGetContent like below.

const [isPrinting, setIsPrinting] = useState(false);
const printRef = useRef(null);

const promiseResolveRef = useRef(null);

useEffect(() => {
  if (isPrinting && promiseResolveRef.current) {
    promiseResolveRef.current();
  }
}, [isPrinting]);

const handlePrint = useReactToPrint({
  content: () => printRef.current,
  onBeforeGetContent: () => {
    return new Promise((resolve) => {
      promiseResolveRef.current = resolve;
      setIsPrinting(true);
    });
  },
  onAfterPrint: () => {
    promiseResolveRef.current = null;
    setIsPrinting(false);
  }
});

And with the isPrinting flag, you can hide/show elements, or change the style of the elements.