Tutorials

Article Content:Generate pdf thermal invoice with mpdf

Generate pdf thermal invoice with mpdf

Generate pdf thermal invoice with mpdf.

Printing is an easy task for the web developer, you just want a pure HTML and CSS layout with simple body structure and you will be done.

Even if you work with PDF format it's a little bit harder but there are many PHP libraries to help you end this job, but this all about normal A4 printing, so what about thermal printing.

In the last project I had a task where the client wants to print bills receipt , first it was A4 printing papers then he asked me to design bills as a thermal printing which I don't know about, after googling I found two ways to do it, one of them I choose to do the task, let's see why?

Thermal printing PHP library

The first try was -- library, which is the most popular PHP library to print thermal receipts directly, it's supports various devices like ------, but to get it works with your device directly you need to tie it with your system with the following steps (steps with Windows 10) only :

1- Add the printer.

3- Share the printer to the network and rename it to a specific name As example (webeasystep)

4- Make a printing test from terminal (Aka Command line) with this code

php foo.php > testfile
print /D:"\\%COMPUTERNAME%\YOUR-PRINTER-NAME" testfile

5- Download the PHP receipt printer library in the localhost, rename it to “print”, open example/interface/windows-usb.php which proper for Windows system and USB cable (also you can choose the proper file for your system and cable type).

6- Change the $connection variable from null to your printer name as an example (webeasystep), by doing this you will tie the printer with the library to take printing orders throughout the network.

7- Go to the URL localhost/print/example/interface/windows-usb.php 

When opening the URL it will print instantly!!

 

Final Result !!!

 

Thermal printing throughout pdf

To Print invoice from pdf in codeigniter, you can use any pdf library to convert HTML to pdf then try to print from pdf with some settings, in this tutorial I will focus on MPDF library because I prefer to use it, for more info I recommend to visit this tutorial using MPDF to convert HTML to pdf.

Now let’s create the receipt or the invoice with paper size that fit Thermal printer

To create this pdf you want to create a function in your controller

    function index()
    {
        // boost the memory limit if it's low ;)
        ini_set('memory_limit', '256M');
        // load library
        $this->load->library('pdf');
        $pdf = $this->pdf->load();
        // retrieve data from model or just static date
        $data['title'] = "items";
        $pdf->allow_charset_conversion=true;  // Set by default to TRUE
        $pdf->charset_in='UTF-8';
     //   $pdf->SetDirectionality('rtl'); // Set lang direction for rtl lang
        $pdf->autoLangToFont = true;
        $html = $this->load->view('content/mpdf', $data, true);
        // render the view into HTML
        $pdf->WriteHTML($html);
        // write the HTML into the PDF
        $output = 'itemreport' . date('Y_m_d_H_i_s') . '_.pdf';
        $pdf->Output("$output", 'I');
        // save to file because we can exit();
    }

Then you should create a view file with content like this

<!DOCTYPE html>
<html lang="ar">
<!-- <html lang="ar"> for arabic only -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Express Wash Customer Invoice</title>
    <style>
        @media print {
            @page {
                margin: 0 auto; /* imprtant to logo margin */
                sheet-size: 300px 250mm; /* imprtant to set paper size */
            }
            html {
                direction: rtl;
            }
            html,body{margin:0;padding:0}
            #printContainer {
                width: 250px;
                margin: auto;
                /*padding: 10px;*/
                /*border: 2px dotted #000;*/
                text-align: justify;
            }

           .text-center{text-align: center;}
        }
    </style>
</head>
<body onload="window.print();">
<h1 id="logo" class="text-center"><img src='<?= base_url() ?>global/site/logo.jpg' alt='Logo'></h1>

<div id='printContainer'>
    <h2 id="slogan" style="margin-top:0" class="text-center">Cleaning Company</h2>

    <table>
        <tr>
            <td>Invoice Num</td>
            <td><b>#59867</b></td>
        </tr>
        <tr>
            <td>Created At</td>
            <td><b><?= date("d-m-Y H:i:s", time()); ?><br></b></td>
        </tr>

        <tr>
            <td>Client Name</td>
            <td><b>John Cena</b></td>
        </tr>
    </table>
    <p class="text-center"><img src="<?= base_url() ?>global/site/qr.png" alt="QR-code" class="left"/></p>
    <hr>

    <table>
        <tr>
            <td><b>Service Type</b></td>
            <td><b>Price</b></td>
        </tr>
        <tr><td colspan="2"><hr></td></tr>
        <tr>
            <td><b>Clean Cars</b></td>
            <td><b>15.7 USD</b></td>
        </tr>
        <tr>
            <td> eco badge for waterless car washThe service at Detailing Knights is not only unmatched, it is also mobile, waterless and environmentally friendly. </td>
            <td></td>
        </tr>
    </table>
    <hr>

    <table>
        <tr>
            <td><b>Service Fee</b></td>
            <td><b>15.7 USD</b></td>
        </tr>
        <tr>
            <td><b>Discount</b></td>
            <td><b>1.7 USD</b></td>
        </tr>
        <tr>
            <td><b>Net Value</b></td>
            <td><b>14 USD</b></td>
        </tr>
    </table>
    <hr>

</div>
</body>
</html>

 Final result!!

Why I prefer PDF To Print Thermal receipts?

I like this way for many reasons, it is a simple way because you just need HTML CSS code structure no more but with the other way you should handle system settings, share network issues, devices driver compatibility, then if your language is RTL language or UTF-8 you should handle encoding for this language.

another problem I faced when work with the first way, the lack of flexibility in the browser printing, on the despite the pdf printing in your pc has a much flexibility to change scale, zoom and other options as you like.

finally, it is my opinion and it is up to you, I just put them here to help you make the right choice 

DOWNLOAD SOURCE CODE



  • Mousa Alshaikh
    Hey man I would like to thank u for this article it's helpful but I just wondering if this print library works with client side printer or just server side printer?
    November 17, 2017
    Reply
    • Hamzmaon
      hamzamon@gmail.com
      Hello, Is it print from server side script to client side printer?
      January 27, 2019
      Reply
  • Herbert
    Thx i found it useful to me
    March 12, 2018
    Reply
  • Tony Jimeno
    I followed the link http://localhost/print/example/interface/windows-usb.php and it says: Warning: copy(\\MyPC\POS-58): failed to open stream: Permission denied in C:\xampp\htdocs\print\src\Mike42\Escpos\PrintConnectors\WindowsPrintConnector.php on line 372 Couldn't print to this printer: Failed to copy file to printer
    May 23, 2019
    Reply
  • bistou
    hello, i download the code source but didnt find the autoload can you send it for me please
    March 7, 2020
    Reply
  • nikhil borikar
    Hello, thanks for the code you have written over here. I stuck into the process of printing via thermal printer but many time it print with very small font as well as it print whole page instead of cutting of the page once it completed printing on page. It causes to waste the half of the page. Thanks again.
    August 28, 2020
    Reply

Leave a Reply

Your email address will not be published.


Notify me of followup comments via e-mail.
You can also Subscribe without commenting.