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")}
</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>)