I'm working a piece of functionality that takes content from a Bootstrap modal, saves it to a PDF and downloads the file to my local PC.
Here's an excerpt from my HTML and listItem.js file
function downloadPDF() {
// some stuff
html2canvas($("#printItems")[0], {
allowTaint: true
}).then(function(canvas) {
var imgData = canvas.toDataURL('image/jpeg, 1.0');
var pdf = jsPDF({
unit: 'mm',
format: 'a4',
orientation: 'portrait'
});
pdf.addImage(imgData, 'jpeg', 15, 2);
pdf.save('test.pdf');
});
}<div class="modal-body" id="printItems">
<div class="container" id="selectedItems"></div>
</div>
<script type="text/javascript" src="/library/html2canvas.min.js"></script>
<script type="text/javascript" src="/library/jspdf.min.js"></script>The problem I'm having is when I hit pdf.save('test.pdf') the function fails and I get the following error:
Uncaught(in promise) TypeError: l(...).createObjectURL is not a function
I'm not sure what I'm doing wrong here. Also, I'm working with version 1.5.3 of jsPDF and 1.1.4 of html2canvas
This was a very strange issue, but I figured out what was wrong and it really had nothing to do with the jspdf or html2canvas versions I was using. For some reason jspdf did not like me referencing a URL in two of my other scripts. Once I removed the actual URLs(https) and just had the physical path it worked fine. I was going down the wrong road looking into versioning and figuring out different ways to write a promise. LOL and SMH
The code I posted above works now.
I tried this and seems working without any problem. check the versions that I used from CDN in the below snippet.
I think @Rory McCrossan is right about trying new versions.
<html>
<header>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</header>
<body>
<div class="modal-body" id="printItems">
<div class="container" id="selectedItems"> Some Text...</div>
</div>
<script>
function downloadPDF() {
html2canvas($("#printItems")[0], {
allowTaint: true
}).then(function (canvas) {
var imgData = canvas.toDataURL('image/jpeg, 1.0');
var pdf = new jspdf.jsPDF({
unit: 'mm',
format: 'a4',
orientation: 'portrait'
});
pdf.addImage(imgData, 'jpeg', 15, 2);
pdf.save('test.pdf');
});
}
downloadPDF()
</script>
</body>
</html>