Thursday, February 9, 2023

html2pdf.js | Client-side HTML-to-PDF rendering using pure JS JavaScript

Import html2pdf using CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"/>
Once installed, html2pdf.js is ready to use. The following command will generate a PDF of #element-to-print and prompt the user to save the result:
var element = document.getElementById('element-to-print');
html2pdf(element);
Below is a advance example using header and footer:
var date = new Date().toISOString().split("T")[0];
var opt = {
    margin:       0.5,
    filename:     'work-log-report-' + date + '.pdf',
    enableLinks:  false,
    pagebreak:    { mode: 'avoid-all' },
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
};
var element = document.getElementById('element-to-print');
html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
    console.log("Done");

    var totalPages = pdf.internal.getNumberOfPages();
    for (var i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.setTextColor(150);
        pdf.text('Work Log Report - ' + date, (pdf.internal.pageSize.getWidth()/2) - 0.99, 0.35);
        pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth()/2) - 0.3, pdf.internal.pageSize.getHeight() - 0.25);
    }
}).save();
Output would be as below:

Live Example

html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.
Company Name Employee Name Country
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name

No comments:

Post a Comment