React - Blank PDF when exporting file using react-to-print and html2pdf

Viewed 24

I'm using react-to-print and html2pdf libraries in order to be able to print and also generate a file from a react component. Following the example found here, I just get a blank pdf file. However, from the console log I'm getting a html element which contains the elements I'd like to be in the file. I have no clue why the file is created blank, any help will be appreciated.

    const handleDownload = useReactToPrint({
        onPrintError: (error) => console.log(error),
        content: () => componentRef.current,
        removeAfterPrint: true,
        print: async (printIframe) => {
          const doc = printIframe.contentDocument;
          console.log(doc);
          if (doc) {
            const html = doc.getElementsByTagName("html")[0];
            console.log(html);
            const exporter = new Html2Pdf(html,{filename:"Note.pdf"});
            await exporter.getPdf(true);
          }
    },
  });

The component referenced:

<DesignPrintNote ref={componentRef} conSello={conSello} conFecha={conFecha} tienda={tienda} fechavalue={fechavalue} contenido={contenido}/>

Which returns:

return (
  <div className='print-hojaVacaciones' ref={ref}>
    <div className="printChild printFuturaFont">
    
          <img id="logotipo" src={header}/>
          <div className="parrafo">
            <div style={{display: "flex", alignItems: "center"}} >
             {conFecha && 
             <div id="conjuntofecha" style={{display: "flex", alignItems: "center"}}>
                {tienda}, a {moment({fechavalue}).format("DD/MM/YYYY")} &nbsp;
              </div>}
            <div style={{display: "flex", justifyContent: "center", alignItems: "center", marginLeft: "10px"}}>
              <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center"}}></div>
            </div>
          </div>
          <div style={{display:"flex", flexDirection:"row", alignItems: "center"}} className="form-check form-switch show2hidden"></div>
            <p id="parrafoprint" className="zona_escritura" style={{border:"none"}} contentEditable="true"></p>
            <div style={{margin:"1cm 1cm 0 0",display:"flex",justifyContent:"space-between"}}>
              <span>Atentamente,</span>
            {conSello && <img id="sello" src={sello} style={{width:"4.5cm", alignSelf:"flex-end"}}/>}
            </div>
          </div>
        
    </div>
  </div>)
0 Answers
Related