function startPrintProcess(canvasObj, fileName, callback) {
var pdf = new jsPDF('l', 'pt', 'a4'),
pdfConf = {
pagesplit: false,
background: '#fff'
};
document.body.appendChild(canvasObj); //appendChild is required for html to add page in pdf
pdf.addHTML(canvasObj, 0, 0, pdfConf, function() {
document.body.removeChild(canvasObj);
pdf.addPage();
pdf.save(fileName + '.pdf');
callback();
});
}
$('#print-btn').click(()=>{
html2canvas(document.getElementById('dom-to-print'), {
onrendered: function(canvasObj) {
startPrintProcess(canvasObj, 'printedPDF',function (){
alert('PDF saved');
});
//save this object to the pdf
}
});
})
<body>
<div id='dom-to-print'>
<h3>Test heading</h3>
<p>This is legen..wait for it..dary</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="placeholder" x="0px" y="0px" width="600px" height="300px" viewBox="0 0 600 400" enable-background="new 0 0 600 400" xml:space="preserve">
<radialGradient id="SVGID_1_" cx="615.8203" cy="-47.6318" r="447.8687" gradientTransform="matrix(1 0 0 -1 -321 163.5)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#3AA9D7"/>
<stop offset="1" style="stop-color:#2BA3D4"/>
</radialGradient>
<rect fill="url(#SVGID_1_)" width="600" height="400"/>
<path fill="#FFFFFF" d="M234.539,148.5v103h130.922v-103H234.539z M354.909,240.33H245.707v-80.661h109.202V240.33L354.909,240.33z"/>
<polygon fill="#FFFFFF" points="251.58,231.643 274.088,207.984 282.521,211.633 309.13,183.308 319.604,195.836 324.33,192.982 349.898,231.643 "/>
<circle fill="#FFFFFF" cx="277.582" cy="180.18" r="9.83"/>
</svg>
</div>
<button id='print-btn'>Start print process</button>
</body>