All i want to do is, convert large html to pdf using javascript.
I have sample html placed in assest folder of project and added one button which will convert the html to pdf using jsPdf.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- html2canvas library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- jsPDF library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="index_files/style.css" />
</head>
<body>
<!-- Trigger button -->
<button onclick="Convert_HTML_To_PDF();">Convert HTML to PDF</button>
<!-- HTML content for PDF creation -->
<div id="contentToPrint">
<div class="stl_view">
<div class="stl_05 stl_06">
<div class="stl_01" style="left:21.2717em;top:3.4123em;"><span class="stl_10 stl_08 stl_11" style="word-spacing:0.0001em;">Intermediate report </span></div>
<div class="stl_01" style="left:17.0383em;top:14.3364em;"><span class="stl_22 stl_08 stl_11" style="word-spacing:0.0004em;">This page is intentionally left blank. </span></div>
</div>
</div>
</div>
</body>
</html>
app.js
window.jsPDF = window.jspdf.jsPDF;
// Convert HTML content to PDF
function Convert_HTML_To_PDF() {
var doc = new jsPDF();
// Source HTMLElement or a string containing HTML.
var elementHTML = document.querySelector("#contentToPrint");
doc.html(elementHTML, {
callback: function(doc) {
// Save the PDF
doc.save('document.pdf');
},
margin: [10, 10, 10, 10],
autoPaging: 'text',
x: 0,
y: 0,
width: 190, //target width in the PDF document
windowWidth: 675, //window width in CSS pixels
});
}
here is my code i tried in stackblitz
issue is: downloaded pdf is not correctly formatted/aligned with html.
what is the issue ? can someone help me to find where i am making mistake ?
Thanks in advance!
4