Open
Description
When passing a function to the html2canvas option onclone via jsPDF, via the html module's html2canvas property, the generated PDF does not reflect the changes in the cloned document.
Some self-contained html is below to copy+paste, which demonstrates what seems to be happening. From what I can tell, jsPDF is using an overlay and container for its document source, while html2canvas creates its own container for its cloned document, which jsPDF never seems to reference.
I didn't see any existing issues around this, so not sure if I'm missing something, using incompatible versions of something, etc. Thanks for any help!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.js"></script>
<style type="text/css">
.html2pdf__overlay {
margin: 12px 0;
visibility: visible !important;
position: unset !important;
border: solid 1px red !important;
height: 250px !important;
width: 500px !important;
}
.html2canvas-container {
visibility: visible !important;
position: unset !important;
border: solid 1px blue !important;
height: 250px !important;
width: 500px !important;
}
</style>
</head>
<body>
<div id="mainContainer">
<span id="mainText">Original Document</span>
</div>
<button id="jsPdfButton">Generate PDF</button>
<div>
<span style="color: red;">jsPDF / html2pdf overlay is red</span><br />
<span style="color: blue;">html2canvas container for cloned document in blue</span>
</div>
<script type="text/javascript">
function delay(t, v) {
return new Promise(function (resolve) {
setTimeout(resolve.bind(null, v), t)
});
}
const { jsPDF } = window.jspdf;
const doc = new jsPDF("portrait", "pt", "a4");
document.getElementById("jsPdfButton").addEventListener("click", (event) => {
doc.html(document.getElementById("mainContainer"), {
html2canvas: {
removeContainer: false,
onclone: async function (doc) {
// Change text in cloned document, which should reflect in generated PDF
// Slowing it down to see what's going on...
await delay(2000);
doc.getElementById("mainText").innerHTML = "Cloned Document";
await delay(2000);
}
},
callback: function (doc) {
window.open(doc.output("bloburl"));
}
});
});
</script>
</body>
</html>