Quotr – Open Source PHP Quotation Generator (HTML, PDF, DOCX, PNG)

Quotr is a free and open-source PHP quotation generator that is capable of creating HTML, PDF, DOCX, and PNG quotations. It is a simple and fuss-free package, giving developers a quick boost with their quotation generation needs.

 

TABLE OF CONTENTS

 

 

DOWNLOAD & NOTES

First, here are the download links and a quick “setup guide” for the impatient folks who don’t have the patience to read through everything.

 

INSTALLATION & REQUIREMENTS

There is no “installation” involved, only a small hassle:

  • Open quolib/quotr.php, change (C1) company information to your own.
  • That’s all – See example.php for a quick start.
  • MPDF requires GD extension to work properly.

 

LICENSE & DOWNLOAD

Quotr is released under the MIT License. You are free to use it for personal and commercial projects, and modify it as you see fit. On the condition that the software is provided “as-is”. There are no warranties provided and “no strings attached”. Code Boxx and the authors are not liable for any claims, damages, or liabilities.

GitHub | SourceForge

 

 

THE QUOTATION TEMPLATES

 

CREDITS & LIBRARIES USED

Quotr is made possible with the following open-source projects:

  • MPDF for generating PDF quotations.
  • PHPWord for generating DOCX quotations.
  • HTML2CANVAS for the PNG quotations (screenshot HTML and save as PNG).

 

HOW TO USE

So far so good? Let us now go through a quick crash course on how to use Quotr.

 

STEP 1) LOAD QUOTR LIBRARY

// (A) LOAD QUOTR
require "quolib/quotr.php";

Start by including the quolib/quotr.php library in your own project. This will automatically create a $quotr object.

 

STEP 2) FEED QUOTATION INFORMATION

// (B) SET QUOTATION DATA
// (B1) COMPANY INFORMATION
/* RECOMMENDED TO JUST PERMANENTLY CODE INTO QUOLIB/QUOTR.PHP > (C1)
$quotr->set("company", [
"http://localhost/code-boxx-logo.png",
"D:/http/code-boxx-logo.png",
"Code Boxx",
"Street Address, City, State, Zip",
"Phone: xxx-xxx-xxx | Fax: xxx-xxx-xxx",
"https://code-boxx.com",
"doge@code-boxx.com"
]); */

// (B2) QUOTATIONHEADER
$quotr->set("head", [
  ["QUOTATION #", "CB-123-456"],
  ["Valid From", "2011-11-11"],
  ["Valid Till", "2011-12-12"]
]);

// (B3) CUSTOMER
$quotr->set("customer", [
  "Customer Name",
  "Street Address",
  "City, State, Zip",
  "Tel, Email"
]);

// (B4) ITEMS - ADD ONE-BY-ONE
$items = [
  ["Rubber Hose", "5m long rubber hose", 3, "$5.50", "$16.50"],
  ["Rubber Duck", "Good bathtub companion", 8, "$4.20", "$33.60"],
  ["Rubber Band", "", 10, "$0.10", "$1.00"],
  ["Rubber Stamp", "", 3, "$12.30", "$36.90"],
  ["Rubber Shoe", "For slipping, not for running", 1, "$20.00", "$20.00"]
];
// foreach ($items as $i) { $quotr->add("items", $i); }

// (B5) ITEMS - OR SET ALL AT ONCE
$quotr->set("items", $items);

// (B6) TOTALS
$quotr->set("totals", [
  ["SUB-TOTAL", "$108.00"],
  ["DISCOUNT 10%", "-$10.80"],
  ["GRAND TOTAL", "$97.20"]
]);

// (B7) NOTES, IF ANY
$quotr->set("notes", [
  "This quotation is not an invoice and it is non-contractual.",
  "YOUR TERMS AND CONDITIONS HERE."
]);
 
// (B8) INCLUDE SIGN-OFF ACCEPTANCE
$quotr->set("accept", true);

This is probably the most “complicated” step, you need to use $quotr->set() or $quotr->add() to feed Quotr with information:

  • Company logo, name, address, contact.
  • Quotation information.
  • Customer information.
  • The items.
  • Totals.
  • Notes, if any.
  • Include a “sign to accept”?

 

 

STEP 3) CHOOSE A TEMPLATE & OUTPUT THE QUOTATION

// (C) OUTPUT
// (C1) CHOOSE A TEMPLATE
 $quotr->template("apple");
// $quotr->template("banana");
// $quotr->template("blueberry");
// $quotr->template("lime");
// $quotr->template("simple");
// $quotr->template("strawberry");

// (C2) OUTPUT IN HTML
// 1 : DISPLAY IN BROWSER (DEFAULT)
// 2 : FORCE DOWNLOAD
// 3 : SAVE ON SERVER
// 4 : DISPLAY IN BROWSER & SAVE AS PNG
$quotr->outputHTML();
// $quotr->outputHTML(1);
// $quotr->outputHTML(2, "QUOTATION.html");
// $quotr->outputHTML(3, __DIR__ . DIRECTORY_SEPARATOR . "QUOTATION.html");
// $quotr->outputHTML(4, "QUOTATION.png");

// (C3) OUTPUT IN PDF
// 1 : DISPLAY IN BROWSER (DEFAULT)
// 2 : FORCE DOWNLOAD
// 3 : SAVE ON SERVER
// $quotr->outputPDF();
// $quotr->outputPDF(1);
// $quotr->outputPDF(2, "QUOTATION.pdf");
// $quotr->outputPDF(3, __DIR__ . DIRECTORY_SEPARATOR . "QUOTATION.pdf");

// (C4) OUTPUT IN DOCX
// 1 : FORCE DOWNLOAD (DEFAULT)
// 2 : SAVE ON SERVER
// $quotr->outputDOCX();
// $quotr->outputDOCX(1, "QUOTATION.docx");
// $quotr->outputDOCX(2, __DIR__ . DIRECTORY_SEPARATOR . "QUOTATION.docx");

Finally, choose a template to use and output the quotation.

 

 

CUSTOM TEMPLATE

Want to build your own customized theme? It is actually pretty easy to do so… If you are unsure at any point, feel free to use the “default” simple.php template files as a reference.

 

STEP 1) CREATE AN EMPTY PHP FILE

Start by creating a new PHP file in the respective template folder – quolib/DOCX, quolib/HTML, or quolib/PDF. For example, if we want to add a new “durian” template for HTML, we create quolib/HTML/durian.php.

 

STEP 2) BUILD THE TEMPLATE

2A) ACCESSING QUOTATION INFORMATION

In the template file, we can access the various quotation information previously set with $quotr->set() or $quotr->add().

  • $this->company – Company logo, name, address, contact.
  • $this->head- Quotation information.
  • $this->customer – Customer information.
  • $this->items – The items.
  • $this->totals – Totals.
  • $this->notes – Notes, if any.
  • $this->accept – Draw acceptance section (true/false).

 

2B) HTML TEMPLATES

To create an HTML template, simply put all the HTML code into $this->data. For example, we can access the items to create a list.

quolib/HTML/durian.php
$this->data = "<ul>";
foreach ($this->items as $i) {
  $this->data .= "<li>". $i[0] ."</li>";
}
$this->data .= "</ul>";

 

 

2C) PDF TEMPLATES

PDF generation is handled by MPDF, and it is capable of taking in HTML to generate PDF.

quolib/PDF/durian.php
$this->data = "<ul>";
foreach ($this->items as $i) { $this->data .= "<li>". $i[0] ."</li>"; }
$this->data .= "</ul>";
$mpdf->WriteHTML($this->data);

Check out the official MPDF documentation if you need more information.

 

2D) DOCX TEMPLATES

PHPWord handles the DOCX generation, and it is the “unfriendliest” to work with… Just read through the official PHPWord documentation for more information.

quolib/DOCX/durian.php
$section = $pw->addSection();
$table = $section->addTable($tableStyle);
foreach ($this->items as $i) {
  $table->addRow();
  $cell = $table->addCell(2000, $style);
  $cell->addText($i[0]);
}

 

QUOTR FAQ

Lastly, here are a few common questions that I foresee people asking.

 

PNG GENERATION IS “NOT WORKING”

  • Edit invlib/quotr.php, change (G2) and use absolute URL for the html2canvas library – <script src="https://your-site.com/invlib/html2canvas.js"></script>.
  • Alternatively, just load it from CDNJS.
  • As you can see, we are pretty much just taking a screenshot of the HTML quotation, creating an <a download="QUOTATION.PNG"> link, and click on it.
  • This may not always work, depending on the browser and/or anti-virus. The safer way is to attach the <a> link to the page, and manually click on it.

 

SAVE PNG TO THE SERVER

Edit invlib/quotr.php, change (G2) to upload the PNG to the server.

window.onload = () => html2canvas(document.getElementById("quotation")).then(canvas => {
  // (A) CANVAS TO FORM DATA
  var data = new FormData();
  data.append("img", canvas.toDataURL("image/png"));
 
  // (B) UPLOAD TO SERVER
  fetch("SERVER-SAVE.PHP", { method:"post", body:data })
  .then(res => res.text())
  .then(txt => console.log(txt))
  .catch(err => console.error(err));
});

Then, save the uploaded PNG on the server.

<?php
$file = fopen("QUOTATION.PNG", "w");
$data = explode(",", $_POST["img"]);
$data = base64_decode($data[1]);
fwrite($file, $data);
fclose($file);

 

 

CAN’T PHP DIRECTLY GENERATE A PNG!?

  • Yes, if someone is crazy enough to create an “HTML to PNG” PHP library.
  • That will literally mean “a PHP image library that is capable of reading and rendering HTML/CSS”.
  • So until then, we are all stuck with using the browser to render the HTML/CSS, then saving it to a PNG

Leave a Comment

Your email address will not be published. Required fields are marked *