I am trying to figure out the best way to convert multiple HTML strings to PDFs (client side), add those to a .zip file (preferably using JSZip) and then downloading that .zip file.
Here is some code to try and accomplish this...
// HTML examples to render
var tableHtml = `<table>
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
</table>`
var boldHtml = "<p> Hello <strong>World</strong> </p>"
var imageHtml = `<h1> City </h1>
<img src="https://images.unsplash.com/photo-1582010905429-bef463482aa2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80">`
var htmlToConvert = [tableHtml, boldHtml, imageHtml];
// Convert (using jsPDF, but totally open to other options... As this doesn't work)
let fileNumber = 1;
for (const html of htmlToConvert) {
let jsPdf = new jsPDF();
jsPdf.html(html); // This right here seems to be what I can't get working...
zip.file(`file${fileNumber}.pdf`, jsPdf.output('blob'), { binary: false });
fileNumber ;
}
// Save .zip file
const blob = await zip.generateAsync({ type: 'blob' });
const fileSaver = await import('file-saver');
fileSaver.default.saveAs(
blob,
`example.zip`
);
This code doesn't work, I think it's specifically the line jsPdf.html(html)
that doesn't work. Once the .zip downloads there are 3 PDF files, but they are all blank with no content.
If I replace jsPdf.html(html)
with jsPdf.text(html, 1, 1)
that seems to work, but it's just plain html, so nothing is rendered. I did take a look at this