I wanted to convert my HTML page to a PDF file with a button click. After I click this "Download" button, I want the PDF to be automatically downloaded.
I tried this:
<button onclick="printFunction()">Download</button>
<script>
function printFunction() {
window.print();
}
</script>
But this can only generate a print page, which I need to save the PDF file manually.
I searched online and find a lot of answers that suggest we add a third-party plug-in. Is there an easier way to do that?
I found a similar example here: /download-html-page-as-pdf-using-javascript/
I wanted to convert my HTML page to a PDF file with a button click. After I click this "Download" button, I want the PDF to be automatically downloaded.
I tried this:
<button onclick="printFunction()">Download</button>
<script>
function printFunction() {
window.print();
}
</script>
But this can only generate a print page, which I need to save the PDF file manually.
I searched online and find a lot of answers that suggest we add a third-party plug-in. Is there an easier way to do that?
I found a similar example here: https://phpcoder.tech/download-html-page-as-pdf-using-javascript/
Share Improve this question asked Mar 15, 2022 at 15:11 MaryMary 3591 gold badge4 silver badges18 bronze badges 1- 1 Using a third party plugin is the easier way to do it. – Samball Commented Mar 15, 2022 at 15:28
2 Answers
Reset to default 4I'd use html2pdf
<body id="body">
<button id="button">Click me!</button>
<script src="html2pdf.bundle.min.js"></script>
<script>
const btn = document.getElementById("button");
btn.addEventListener("click", function(){
var element = document.getElementById('body');
html2pdf().from(element).save('filename.pdf');
});
</script>
</body>
here are the docs https://www.npmjs./package/html2pdf.js/v/0.9.0 You can change filename.pdf to whatever you want (aside from the extension)
This code worked for me:
<body id="body">
<script src="https://cdnjs.cloudflare./ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
// Function to handle download
function downloadFunction() {
hideButtons();
const element = document.getElementById('body');
const formattedDate = new Date().toLocaleDateString('en-GB').replace(/\//g, '-');
const options = {
margin: 10,
filename: 'FileName_' + formattedDate + '.pdf',
image: { type: 'jpeg', quality: 1.0 },
html2canvas: { scale: 4 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf(element, options);
showButtons();
}
</script>
<button onclick="downloadFunction()">Download this WebPage as PDF</button>
<p>
the quick brown fox jumped over the lazy dogs
</p>
</body>
Source Document: https://ekoopmans.github.io/html2pdf.js/
CDN JS link: https://cdnjs./libraries/html2pdf.js/0.10.1