jsPDF-Autotable Tutorial to Add Dynamic Tables in PDF Document With Invoice Data in Browser Using JS

index.html

<!DOCTYPE html>
<html>
<head>
    <title>JSPDF Table Invoice Generator</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.3/jspdf.plugin.autotable.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <h1>JSPDF Table Invoice Generator</h1>

    <table id="invoiceTable">
        <thead>
            <tr>
                <th>Item</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td contenteditable="true">Item 1</td>
                <td contenteditable="true" oninput="updateTotal(this)">1</td>
                <td contenteditable="true" oninput="updateTotal(this)">10</td>
                <td>10.0</td>
            </tr>
            <tr>
                <td contenteditable="true">Item 2</td>
                <td contenteditable="true" oninput="updateTotal(this)">2</td>
                <td contenteditable="true" oninput="updateTotal(this)">5</td>
                <td>10.0</td>
            </tr>
        </tbody>
    </table>

    <button onclick="insertRow()">Add Row</button>
    <button onclick="generatePDF()">Export to PDF</button>

    <script>
        function updateTotal(element) {
            const row = element.parentElement;
            const quantity = parseFloat(row.cells[1].innerText) || 0;
            const price = parseFloat(row.cells[2].innerText) || 0;
            const total = quantity * price;

            row.cells[3].innerText = total.toFixed(1);
        }

        function insertRow() {
            const table = document.getElementById('invoiceTable').getElementsByTagName('tbody')[0];
            const newRow = table.insertRow();

            // Add new cells (columns) to the new row
            const cell1 = newRow.insertCell(0);
            const cell2 = newRow.insertCell(1);
            const cell3 = newRow.insertCell(2);
            const cell4 = newRow.insertCell(3);

            // Set the contenteditable attribute and default values
            cell1.contentEditable = "true";
            cell1.innerText = "New Item";

            cell2.contentEditable = "true";
            cell2.innerText = "1";
            cell2.setAttribute("oninput", "updateTotal(this)");

            cell3.contentEditable = "true";
            cell3.innerText = "0";
            cell3.setAttribute("oninput", "updateTotal(this)");

            cell4.innerText = "0"; // Total (non-editable, will be computed dynamically)
        }

        function generatePDF() {
            const doc = new jsPDF();
            const table = document.getElementById("invoiceTable");
            const headers = Array.from(table.querySelectorAll('th')).map(th => th.innerText);
            const data = Array.from(table.querySelectorAll('tr')).map(tr => {
                return Array.from(tr.querySelectorAll('td')).map(td => td.innerText);
            });

            // Remove the first element from data because it's the header row
            data.shift();

            doc.autoTable({
                head: [headers],
                body: data,
            });

            doc.save("invoice.pdf");
        }
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<!DOCTYPE html>

<html>

<head>

<title>JSPDF Table Invoice Generator</title>

<style>

table {

width: 100%;

border-collapse: collapse;

}

th,

td {

border: 1px solid black;

padding: 8px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<h1>JSPDF Table Invoice Generator</h1>

<thead>

<tr>

<th>Quantity</th>

<th>Price</th>

<th>Total</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<button onclick="generatePDF()">Export to PDF</button>

function updateTotal(element) {

const row = element.parentElement;

const quantity = parseFloat(row.cells[1].innerText) || 0;

const price = parseFloat(row.cells[2].innerText) || 0;

const total = quantity * price;

row.cells[3].innerText = total.toFixed(1);

}

function insertRow() {

const table = document.getElementById('invoiceTable').getElementsByTagName('tbody')[0];

const newRow = table.insertRow();

// Add new cells (columns) to the new row

const cell1 = newRow.insertCell(0);

const cell2 = newRow.insertCell(1);

const cell3 = newRow.insertCell(2);

const cell4 = newRow.insertCell(3);

// Set the contenteditable attribute and default values

cell1.contentEditable = "true";

cell1.innerText = "New Item";

cell2.contentEditable = "true";

cell2.innerText = "1";

cell2.setAttribute("oninput", "updateTotal(this)");

cell3.contentEditable = "true";

cell3.innerText = "0";

cell3.setAttribute("oninput", "updateTotal(this)");

cell4.innerText = "0"; // Total (non-editable, will be computed dynamically)

}

function generatePDF() {

const doc = new jsPDF();

const table = document.getElementById("invoiceTable");

const headers = Array.from(table.querySelectorAll('th')).map(th => th.innerText);

const data = Array.from(table.querySelectorAll('tr')).map(tr => {

return Array.from(tr.querySelectorAll('td')).map(td => td.innerText);

});

// Remove the first element from data because it's the header row

data.shift();

doc.autoTable({

head: [headers],

body: data,

});

doc.save("invoice.pdf");

}

</script>

</body>

</html>

jsPDF-Autotable Tutorial to Add Dynamic Tables in PDF Document With Invoice Data in Browser Using JS

Comments

Leave a Reply Cancel reply

Archives