How to generate pdf from HTML in div using Javascript

In web development, converting HTML elements (such as div) into PDF is a common requirement that can be achieved using various JavaScript libraries. Below, I will introduce a commonly used library—jspdf—and demonstrate how to achieve this by integrating with html2canvas.

Using jspdf and html2canvas

Step 1: Include the Libraries

First, include jspdf and html2canvas in your HTML file via CDN:

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

Step 2: Create a Button to Trigger PDF Generation

In your HTML, add a button that triggers PDF generation upon user click:

html
<button onclick="generatePDF()">Generate PDF</button>
<div id="content">
    <h1>Hello, this is a test div</h1>
    <p>This is an example paragraph for the PDF.</p>
</div>

Step 3: Write the JavaScript Function

In your JavaScript file or within a <script> tag, add the following code:

javascript
function generatePDF() {
    const element = document.getElementById('content');

    html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jspdf.jsPDF();

        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save("download.pdf");
    });
}

Explanation

1. Get the element: First, obtain the HTML element to be converted into PDF.
2. Generate Canvas: Use html2canvas to render the DOM element into a Canvas. This library accurately handles CSS styles and renders visual effects.
3. Convert the image: Convert the Canvas into image data (data URL).
4. Create PDF: Create a PDF file using the jspdf library and calculate the image dimensions within the PDF to maintain the original aspect ratio.
5. Add image to PDF: Add the image to the PDF file.
6. Save PDF: Finally, save the generated PDF file using the save method, allowing users to download it.

This method flexibly handles PDF generation for various HTML content while preserving styles and layouts. This is a basic example; jspdf and html2canvas support additional advanced features that can be explored and utilized as needed.