PHP 7 jsPDF Invoice Bill PDF Generator Using Materialize Framework Deployed to Heroku in Browser Using HTML5 & Javascript Full Project For Beginners

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

 

 

About

A simple web app demonstrating conversion of JavaScript to a PDF format using JsPDF

 

 

 

index.php

 

 

<?php
 require "includes/header.php";
 ?>


<main>
  
<div align="center">
<form>
<div class="row">
        <div class="col s12">
          Price Paid:
          <div class="input-field inline">
            <input onkeypress="return isNumberKey(event)" placeholder="0.00"  
            type="text" class="validate" maxlength="8">
            </div>
          </div>
          
  <button class="btn grey darken-2">Generate Invoice</button>
  </form>
  <script 
  src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" 
  integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" 
  crossorigin="anonymous">
  </script>
  <br>
   <?php 
   echo "Current Date: $formatDate<br>"; 
   ?>
  <script>
   const pdf = new jsPDF();
    pdf.setFont("roboto");
    pdf.setFontType("bold");
    pdf.setFontSize(9);


  // setup button param for later ref
   let button = document.querySelector('button');

   // setup input param for later ref
   let input = document.querySelector('input');

   //Date Formatting (DD-MMM-YYYY)
   const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
   let current_datetime = new Date()
   let formatted_date = current_datetime.getDate() + "-" + months[current_datetime.getMonth()] + "-" + current_datetime.getFullYear()
  
   // Listen for the users click
   button.addEventListener('click', printPDF)

   //perform print PDF fucntion w/ formatting
   function printPDF() {
     pdf.text(10,10, `Invoice Date: ${formatted_date}`);
     pdf.text(10,20, `Price paid: £ ${input.value}`);
     pdf.text(10,30, `10% Donation:  £ ${input.value*0.1}`);


     pdf.setProperties({
    title: "Generated Invoice"
      });

    //MOBILE PHONE CHECK V DESKTOP
      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
      {
     var blob = pdf.output();
     window.open(URL.createObjectURL(blob));
      }
    else
    {
      pdf.output('dataurlnewwindow');
    }
     
   }
   </script>
  </div>
</main>

 <?php
 require"includes/footer.php";
  ?>

 

See also  Join 8 Codeigniter Framework PHP Whatsapp Group Link For Codeigniter Developers | Whatsapp Group Links For PHP Codeigniter Programmers

 

JavaScript to PDF using JsPDF

JsPDF Logo

Brief

A demonstration of an invoice creation system using JsPDF, the tool is able to work with javascript, or JSON to generate a user defined PDF, and can be used to ease the process of invoice creation

User Guide:

  • A price is input that was paid for a transaction
  • The price is posted to a PDF document
  • A PDF Document will be opened in a new tab
  • A calculation of the donation the company makes to charity is displayed on the PDF
  • The date of the invoice is recorded at the top of the PDF Document.

Tech Used:

 

 

 

DOWNLOAD FULL SOURCE CODE

 

 

Leave a Reply