I have three separate html divs and I want to save all divs or tags in one pdf (may be multiple pages). The first two divs or tags successfully getting rendering in pdf but not the third tag.
Note: I m calling the table and third div inside the callback function of doc.html. But table is able to render in pdf but one third tag.
My question is: can we call another doc.html inside the callback function of doc.html?
First one:
const htmlToConvert=ReactDOMServer.renderToString(
<div style={{display:'flex',width: '14.5rem', height:'2.2rem', justifyContent:"space-between", alignItems:"flex-start"}}> <table style={{fontSize:"0.26rem"}} id="my-table" >
<tbody style={{fontSize:"0.26rem"}}>
<tr style={{fontSize:"0.26rem"}}>
<td style={{fontSize:"0.26rem"}} >
<b style={{fontSize:"0.26rem"}}>Customer: </b>
</td>
<td style={{fontSize:"0.26rem"}}>
<u style={{fontSize:"0.26rem", textDecoration:"none"}}>{`customerName`}</u>
</td>
</tr>
<tr style={{maxWidth:"0.3rem", width:'0.3rem'}}>
<td style={{fontSize:"0.26rem"}} >
<b style={{fontSize:"0.26rem" ,textDecoration:"none"}}>Address: </b>
</td>
<td style={{fontSize:"0.26rem"}}>
<u style={{fontSize:"0.26rem" ,textDecoration:"none"}}>{`0.selectcust`}</u>
</td>
</tr>
</tbody>
</table>
</div>
)
Second div as table: <table id="my-table1"></table>
Last div:<div ref={myContainer}> <p> Test </p></div>
//// To generate pdf:
doc.html(htmlToConvert, {
callback: function (doc) { doc.autoTable({ html: '#my-table1', theme: 'grid',tableWidth: 198,startY: 65 ,margin:{right:5,left:6},styles: { halign: 'center' } })
doc.html( myContainer.current);
doc.save('print.pdf')
},
x: 4,
y: 30,
});