PHP 7 DomPDF Script to Build Invoice Billing PDF Document Receipt Generator in Browser Using HTML5 Full Project For Beginners

  • Post author:
  • Post category:PHP
  • Post comments:0 Comments

 

 

invoice.pdf

Invoice PDF Generator using dompdf

Usage

  1. git clone https://github.com/sohelamin/invoice.pdf.git
  2. cd invoice.pdf
  3. composer install
  4. Visit http://localhost/invoice.pdf/

screenshot

 

 

invoice.html

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Invoice</title>
        <style type="text/css">
            @font-face {
                font-family: 'Open Sans';
                font-style: normal;
                font-weight: normal;
                src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/yYRnAC2KygoXnEC8IdU0gQLUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');
            }
            @font-face {
                font-family: 'Open Sans';
                font-style: normal;
                font-weight: bold;
                src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzMDdSZkkecOE1hvV7ZHvhyU.ttf) format('truetype');
            }
            @font-face {
                font-family: 'Open Sans';
                font-style: italic;
                font-weight: normal;
                src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/O4NhV7_qs9r9seTo7fnsVCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
            }
            @font-face {
                font-family: 'Open Sans';
                font-style: italic;
                font-weight: bold;
                src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxrQhS7CD3GIaelOwHPAPh9w.ttf) format('truetype');
            }
            @page {
                margin-top: 1cm;
                margin-bottom: 3cm;
                margin-left: 2cm;
                margin-right: 2cm;
            }
            body {
                background: #fff;
                color: #000;
                margin: 0cm;
                font-family: 'Open Sans', sans-serif;
                font-size: 9pt;
                line-height: 100%;
            }
            h1, h2, h3, h4 {
                font-weight: bold;
                margin: 0;
            }
            h1 {
                font-size: 16pt;
                margin: 5mm 0;
            }
            h2 {
                font-size: 14pt;
            }
            h3, h4 {
                font-size: 9pt;
            }
            ol,
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li,
            ul {
                margin-bottom: 0.75em;
            }
            p {
                margin: 0;
                padding: 0;
            }
            p + p {
                margin-top: 1.25em;
            }
            a {
                border-bottom: 1px solid;
                text-decoration: none;
            }
            /* Basic Table Styling */
            table {
                border-collapse: collapse;
                border-spacing: 0;
                page-break-inside: always;
                border: 0;
                margin: 0;
                padding: 0;
            }
            th, td {
                vertical-align: top;
                text-align: left;
            }
            table.container {
                width:100%;
                border: 0;
            }
            tr.no-borders,
            td.no-borders {
                border: 0 !important;
                border-top: 0 !important;
                border-bottom: 0 !important;
                padding: 0 !important;
                width: auto;
            }
            /* Header */
            table.head {
                margin-bottom: 12mm;
            }
            td.header img {
                max-height: 3cm;
                width: auto;
            }
            td.header {
                font-size: 16pt;
                font-weight: 700;
            }
            td.shop-info {
                width: 40%;
            }
            .document-type-label {
                text-transform: uppercase;
            }
            table.order-data-addresses {
                width: 100%;
                margin-bottom: 10mm;
            }
            td.order-data {
                width: 40%;
            }
            .invoice .shipping-address {
                width: 30%;
            }
            .packing-slip .billing-address {
                width: 30%;
            }
            td.order-data table th {
                font-weight: normal;
                padding-right: 2mm;
            }

            table.order-details {
                width:100%;
                margin-bottom: 8mm;
            }
            .quantity,
            .price {
                width: 20%;
            }
            .order-details tr {
                page-break-inside: always;
                page-break-after: auto;
            }
            .order-details td,
            .order-details th {
                border-bottom: 1px #ccc solid;
                border-top: 1px #ccc solid;
                padding: 0.375em;
            }
            .order-details th {
                font-weight: bold;
                text-align: left;
            }
            .order-details thead th {
                color: white;
                background-color: black;
                border-color: black;
            }

            .order-details tr.bundled-item td.product {
                padding-left: 5mm;
            }
            .order-details tr.product-bundle td,
            .order-details tr.bundled-item td {
                border: 0;
            }
            dl {
                margin: 4px 0;
            }
            dt, dd, dd p {
                display: inline;
                font-size: 7pt;
                line-height: 7pt;
            }
            dd {
                margin-left: 5px;
            }
            dd:after {
                content: "\A";
                white-space: pre;
            }

            .customer-notes {
                margin-top: 5mm;
            }
            table.totals {
                width: 100%;
                margin-top: 5mm;
            }
            table.totals th,
            table.totals td {
                border: 0;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            table.totals th.description,
            table.totals td.price {
                width: 50%;
            }
            table.totals tr:last-child td,
            table.totals tr:last-child th {
                border-top: 2px solid #000;
                border-bottom: 2px solid #000;
                font-weight: bold;
            }
            table.totals tr.payment_method {
                display: none;
            }

            #footer {
                position: absolute;
                bottom: -2cm;
                left: 0;
                right: 0;
                height: 2cm;
                text-align: center;
                border-top: 0.1mm solid gray;
                margin-bottom: 0;
                padding-top: 2mm;
            }

            .pagenum:before {
                content: counter(page);
            }
            .pagenum,.pagecount {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body class="invoice">
        <table class="head container">
            <tr>
                <td class="header">
                    Invoice
                </td>
                <td class="shop-info">
                    <div class="shop-name">
                        <h3>Appzcoder</h3>
                    </div>
                    <div class="shop-address"></div>
                </td>
            </tr>
        </table>
        <h1 class="document-type-label"></h1>
        <table class="order-data-addresses">
            <tr>
                <td class="address billing-address">
                    <h3>Billing Address:</h3>
                    N/A
                </td>
                <td class="address shipping-address">
                    <h3>Shipping Address:</h3>
                    N/A
                </td>
                <td class="order-data">
                    <table>
                        <tr class="order-number">
                            <th>Order Number:</th>
                            <td>1</td>
                        </tr>
                        <tr class="order-date">
                            <th>Order Date:</th>
                            <td>May 29, 2016</td>
                        </tr>
                        <tr class="payment-method">
                            <th>Payment Method:</th>
                            <td>Paypal</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table class="order-details">
            <thead>
                <tr>
                    <th class="product">Product</th>
                    <th class="quantity">Quantity</th>
                    <th class="price">Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Item 1</td>
                    <td>1</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>2</td>
                    <td>15</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="no-borders">
                    <td class="no-borders">
                        <div class="customer-notes">
                        </div>
                    </td>
                    <td class="no-borders" colspan="2">
                        <table class="totals">
                            <tfoot>
                            <tr class="cart_subtotal">
                                <td class="no-borders"></td>
                                <th class="description">Subtotal</th>
                                <td class="price"><span class="totals-price"><span class="amount">$ 50.00</span></span></td>
                            </tr>
                            <tr class="order_total">
                                <td class="no-borders"></td>
                                <th class="description">Total</th>
                                <td class="price"><span class="totals-price"><span class="amount">$ 50.00</span></span></td>
                            </tr>
                            </tfoot>
                        </table>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

 

See also  PHP 7 Script to Generate Bulk Random Passwords in Wordpress Dashboard Full Project For Beginners

 

index.php

 

 

<?php

require 'vendor/autoload.php';

use Dompdf\Dompdf;

$dompdf = new Dompdf();

$html = file_get_contents(dirname(__FILE__) . '/invoice.html');

$dompdf->loadHtml($html);

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'portrait');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream();

 

See also  PHP 7 Script to Detect Website Visitor Internet Browser Full Project For Beginners

 

composer.json

 

 

{
    "name": "sohelamin/invoice.pdf",
    "license": "MIT",
    "description": "Invoice PDF Generator using dompdf",
    "keywords": [
        "invoice",
        "pdf",
        "invoice.pdf",
        "dompdf"
    ],
    "authors": [
        {
            "name": "Sohel Amin",
            "email": "sohelamincse@gmail.com",
            "homepage": "http://www.appzcoder.com"
        }
    ],
    "require": {
        "php": ">=5.4.0",
        "dompdf/dompdf": "^0.7.0"
    }
}

Leave a Reply