Generate a professional invoice PDF directly from a dynamic web form using PHP, Dompdf, and AJAX for seamless downloads without page reloads. This tutorial leverages your attached scripts for a production-ready implementation with CSRF protection, logo uploads, and real-time calculations.<\/p>\n
This tutorial explains how to generate a professional Invoice PDF using PHP and AJAX without page reload. The invoice is created dynamically from a web form, supports multiple line items, tax calculation, optional logo upload, and automatically downloads the generated PDF. Let’s dive into the implementation of the invoice PDF generator using PHP and AJAX!<\/p>\n
Install Dompdf via Composer by running (in your project root):<\/p>\n
composer require dompdf\/dompdf<\/pre>\nNote that: You don’t need to download the Dompdf library separately, all the required library files are included in our source code package.<\/u><\/p>\n
\ud83d\udcc1 Project Structure<\/h2>\n
Organize files as follows for clean deployment:<\/p>\n
generate_invoice_pdf\/<\/span>\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 generate_pdf.php\r\n\u251c\u2500\u2500 assets\/<\/span>\r\n\u2502 \u251c\u2500\u2500 css\/<\/span>\r\n\u2502 \u2502 \u2514\u2500\u2500 style.css\r\n\u2502 \u2514\u2500\u2500 js\/<\/span>\r\n\u2502 \u2514\u2500\u2500 app.js\r\n\u2514\u2500\u2500 vendor\/<\/span>\r\n \u2514\u2500\u2500 autoload.php\r\n<\/pre>\n\ud83d\udcbb Code Overview<\/h2>\n
\n
- index.php<\/strong>: Main HTML form for invoice input and JavaScript for AJAX handling.<\/li>\n
- generate_pdf.php<\/strong>: PHP script that processes form data, generates the PDF using Dompdf, and returns it for download.<\/li>\n
- assets\/js\/app.js<\/strong>: JavaScript for dynamic form behavior and AJAX submission.<\/li>\n
- assets\/css\/style.css<\/strong>: Basic styling for the form.<\/li>\n<\/ul>\n
\ud83d\ude80 Implementation Steps<\/h2>\n
\n
- Setup HTML Form (index.php)<\/strong>: Create a form with fields for customer details, invoice items, tax rate, and logo upload. Include buttons to add\/remove items dynamically.<\/li>\n
- JavaScript for Dynamic Behavior (assets\/js\/app.js)<\/strong>: Write JS to handle adding\/removing invoice items, calculating totals in real-time, and submitting the form via AJAX.<\/li>\n
- PHP Backend (generate_pdf.php)<\/strong>: Implement PHP to validate input, process the logo upload, generate the invoice HTML, and convert it to PDF using Dompdf.<\/li>\n
- AJAX Submission<\/strong>: Use AJAX to send form data to the PHP script and handle the PDF download without reloading the page.<\/li>\n
- Testing<\/strong>: Test the entire flow to ensure the invoice is generated correctly and downloads as expected.<\/li>\n<\/ol>\n
Create the Invoice Form (index.php)<\/h2>\n
Create a file named
index.php<\/code> and define HTML elements to build an invoice form with organized sections for customer\/seller details, dynamic items table, tax summary, and notes. The invoice form collects:<\/p>\n\n
- Company & client details (including full addresses)<\/li>\n
- Invoice number & dates<\/li>\n
- Multiple invoice items<\/li>\n
- Tax percentage<\/li>\n
- Optional business logo upload (PNG\/JPG\/GIF, <2MB)<\/li>\n<\/ul>\n
At the beginning, start a PHP session and generate a CSRF token for security.<\/p>\n
<?php
<\/span>\/\/ Start session
<\/span>session_start<\/span>();
<\/span>\/\/ Generate CSRF token
<\/span>if (empty(<\/span>$_SESSION<\/span>[<\/span>'csrf_token'<\/span>])) {
<\/span>$_SESSION<\/span>[<\/span>'csrf_token'<\/span>] = <\/span>bin2hex<\/span>(<\/span>random_bytes<\/span>(<\/span>32<\/span>));
}
<\/span>$csrf <\/span>= <\/span>$_SESSION<\/span>[<\/span>'csrf_token'<\/span>];
<\/span>?><\/span>\r\n\r\n<form<\/span> id<\/span>=\"invoice-form\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span> novalidate<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"hidden\"<\/span> name<\/span>=\"csrf_token\"<\/span> value<\/span>=\"<?= htmlspecialchars($csrf) ?>\"<\/span>><\/span>\r\n\r\n <section<\/span> class<\/span>=\"cols\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"card\"<\/span>><\/span>\r\n <h2<\/span>><\/span>Customer Information<\/h2<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_first\"<\/span> placeholder<\/span>=\"First name\"<\/span> required<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_last\"<\/span> placeholder<\/span>=\"Last name\"<\/span> required<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_business\"<\/span> placeholder<\/span>=\"Business name\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_phone\"<\/span> placeholder<\/span>=\"Phone\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_address\"<\/span> placeholder<\/span>=\"Address\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_city\"<\/span> placeholder<\/span>=\"City\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_state\"<\/span> placeholder<\/span>=\"State\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_zip\"<\/span> placeholder<\/span>=\"Zip Code\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"customer_country\"<\/span> placeholder<\/span>=\"Country\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n\r\n <div<\/span> class<\/span>=\"card\"<\/span>><\/span>\r\n <h2<\/span>><\/span>Seller Information<\/h2<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"seller_business\"<\/span> placeholder<\/span>=\"Business name\"<\/span> required<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"seller_email\"<\/span> placeholder<\/span>=\"Email\"<\/span> type<\/span>=\"email\"<\/span> required<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\r\n <input<\/span> name<\/span>=\"seller_phone\"<\/span> placeholder<\/span>=\"Phone\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span>