Jspdf: HTML5 <Template> to PDF (question/feature request)

[nCr78]

I've tried using the HTML5 template tags to store my CSS/HTML and create new PDFs based on that template with different values and such, but, I don't think it is possible. Am I doing something wrong or is this not supported yet? Is there any other way of creating PDFs from HTML (with CSS) that isn't shown to the user? I've also tried with a shadow DOM but it doesn't seem to get the styling at all.

Template version:

<template id="pdfTemplate"><p> test </p></template>

var template = document.getElementById("pdfTemplate");
var clone = document.importNode(template.content, true);
var doc = new jsPDF();
doc.fromHTML(template, 10, 10, {'width': 180}); //or clone instead of template
doc.save();

The shadow DOM version:

<div style="display: none;" id="pdfTemplate"></div>

var shadowDOMParent = document.getElementById("pdfTemplate");
var shadowDOM = shadowDOMParent.attachShadow({mode: 'open'});
shadowDOM.innerHTML = `styles + html go here`;
var printDiv = shadowDOM.querySelector('#pdf_PrintThis');

var doc = new jsPDF();
doc.fromHTML(printDiv, 0, 0, {'width': 1800});
doc.save();

Thanks in advance!

[Uzlopak]

Yeah, we wont write a full capable html5 parser with css3 capabilities. Have to disappoint you. But if you write a full html5 parser with css3 capabilities, which is like writing a complete browser in javascript, we would be happy to implement it.

But you can download the master branch and build the current code and get a new html-Method which is using html2canvas as a html and css parser. Probably will fit your needs. Still lacks of some features like starting point but it will avoid lot of work.

[nCr78]

Seems easy I guess I'll do that. I'll be back in ~5 years 😆