0
176
ViewsDownload PDF with 2 images and text on single button click using jsPDF
I am new to JavaScript and trying to add a button that exports a PDF with 2 images and some text on a on single button click.
Below is the code I currently have however, it only works when I double click the button.
How would I get this to work on a single click?
<div class="radarChartBox">
<canvas id="radarChart"></canvas>
<button id="downloadPDF" onclick="downloadPDF()">download PDF.</button>
</div>
<script>
function downloadPDF() {
const canvas = document.getElementById('radarChart');
const canvasImg = canvas.toDataURL('image/jpeg', 1.0);
const bannerImg = new Image;
bannerImg.src = "https://slipstreamgroup.com.au/wp-content/uploads/2022/03/Banner-img.jpeg";
let pdf = new jsPDF();
pdf.setFontSize(24);
pdf.setTextColor(255, 255, 255);
pdf.addImage(bannerImg, 'JPEG', 0, 0, 210, 55, "alias1");
pdf.text(10, 25, 'Your ' + formTitle);
pdf.addImage(canvasImg, 'JPEG', 10, 60, 190, 190, "alias2");
pdf.save(firmName + " " + formTitle + ".pdf");
}
</script>
1 answers
Answer question0
Your code is not really fixable as not normal as a minimal running example of a problem since you have undefined variables and chunks of code all over the place with no <html><head><style><body> structure.
By far the simplest way is to use the demos and documentation to see the possibilities so the full working system is one zip file https://github.com/parallax/jsPDF/archive/refs/heads/master.zip, unpack and run jsPDF-master/jsPDF-master/index.html (may take a few seconds as it does a lot) to try the demo off line then trim it back to simply emulate the button as on that page. so here I changed the stock example to double the demo image and shuffle the text around. the download works in one click
