Print HTML from PHP directly to the client printer without print dialog or silent mode

Product WebClientPrint for PHP Published 09/27/2017 Updated 10/28/2020 Author Neodynamic

Overview

In this walkthrough, you'll learn how to print HTML content from a PHP website directly to the client printer without displaying a print dialog i.e. very silently. You'll be able to print HTML content to the Default client printer as well as to any other installed printer at the client machine. This solution works with any browser on Windows OS like IE, Edge, Chrome, Firefox, Opera & Safari as well as on Linux, Raspberry Pi & Mac systems!

The HTML content that we'll print is a simple business card made by pure HTML and CSS markup containing an image. The HTML Card looks like follows:

John Doe

Architect & Engineer

The HTML printing is performed by following these tasks:

Step 1 The HTML content that needs to be printed is converted to a PNG image by leveraging html2canvas utility from pure Javascript code.

IMPORTANT! html2canvas is not supported by all browsers. Please refer to Browser Compatibility topic.

NOTE: It's important that you specify inline style instead of CSS classes to specifying things like Font Family as well as is a good idea to use Data URI to display images in PNG or JPEG formats.
Step 2 Once the HTML content was rendered to a PNG image by using html2canvas, we'll store it at the server side directory of our website through an AJAX POST in order we can get it later when we need to create the ClientPrintJob object.
Step 3 Now once the PNG image was stored at server side directory, we'll invoke WebClientPrint Processor (WCPP) for starting printing it.

Requirements

Development/Server-side

WebClientPrint 6.0 for PHP (or greater)
PHP 5.3+
jQuery 1.10+
html2canvas 0.4+

Client-side

WebClientPrint Processor 6.0 for Windows, Linux, Raspberry Pi & Mac

Follow up these steps

Download & install WebClientPrint for PHP
Create a new PHP Website naming it PrintHtmlCardSample

Now follow up the instructions for each PHP Classic or PHP MVC/Laravel:

PHP Classic
PHP MVC/Laravel

• Create a new folder called wcpcache at your project's root folder

• Copy the WebClientPrint.php to your project's root folder

Creating Controllers

• Create a new PHP file at root folder and name it WebClientPrintController.php and then copy/paste the following code:

<?php
//*********************************
// IMPORTANT NOTE 
// 1. In this sample we store users related stuff (like
// the list of printers and whether they have the WCPP 
// client utility installed) in the wcpcache folder BUT 
// you can change it to another different storage (like a DB)!
// which will be required in Load Balacing scenarios
// 
// 2. If your website requires user authentication, then
// THIS FILE MUST be set to ALLOW ANONYMOUS access!!!
// 
//*********************************
 
include 'WebClientPrint.php';
use Neodynamic\SDK\Web\WebClientPrint;
 
//IMPORTANT SETTINGS:
//===================
//Set wcpcache folder RELATIVE to WebClientPrint.php file
//FILE WRITE permission on this folder is required!!!
WebClientPrint::$wcpCacheFolder = getcwd().'/wcpcache/';
 
if (file_exists(WebClientPrint::$wcpCacheFolder) == false) {
    //create wcpcache folder
    $old_umask = umask(0);
    mkdir(WebClientPrint::$wcpCacheFolder, 0777);
    umask($old_umask);
}
 
//===================
 
// Clean built-in Cache
// NOTE: Remove it if you implement your own cache system
WebClientPrint::cacheClean(30); //in minutes
 
 
// Process WebClientPrint Request
 
$urlParts = parse_url($_SERVER['REQUEST_URI']);
if (isset($urlParts['query'])){
    $query = $urlParts['query'];
    parse_str($query, $qs);
     
    //get session id from querystring if any
    $sid = NULL;
    if (isset($qs[WebClientPrint::SID])){
        $sid = $qs[WebClientPrint::SID];
    }
     
    try{
        //get request type
        $reqType = WebClientPrint::GetProcessRequestType($query);
         
        if($reqType == WebClientPrint::GenPrintScript ||
           $reqType == WebClientPrint::GenWcppDetectScript){
            //Let WebClientPrint to generate the requested script
             
            //Get Absolute URL of this file
            $currentAbsoluteURL = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://";
            $currentAbsoluteURL .= $_SERVER["SERVER_NAME"];
            if($_SERVER["SERVER_PORT"] != "80" && $_SERVER["SERVER_PORT"] != "443")
            {
                $currentAbsoluteURL .= ":".$_SERVER["SERVER_PORT"];
            } 
            $currentAbsoluteURL .= $_SERVER["REQUEST_URI"];
            $currentAbsoluteURL = substr($currentAbsoluteURL, 0, strrpos($currentAbsoluteURL, '?'));
             
            ob_start();
            ob_clean();
            header('Content-type: text/javascript');
            echo WebClientPrint::generateScript($currentAbsoluteURL, $query);
            return;
        } 
        else if ($reqType == WebClientPrint::ClientSetWcppVersion)
        {
            //This request is a ping from the WCPP utility
            //so store the session ID indicating this user has the WCPP installed
            //also store the WCPP Version if available
            if(isset($qs[WebClientPrint::WCPP_SET_VERSION]) && strlen($qs[WebClientPrint::WCPP_SET_VERSION]) > 0){
                WebClientPrint::cacheAdd($sid, WebClientPrint::WCP_CACHE_WCPP_VER, $qs[WebClientPrint::WCPP_SET_VERSION]);
            }
            return;
        }
        else if ($reqType == WebClientPrint::ClientSetInstalledPrinters)
        {
            //WCPP Utility is sending the installed printers at client side
            //so store this info with the specified session ID
            WebClientPrint::cacheAdd($sid, WebClientPrint::WCP_CACHE_PRINTERS, strlen($qs[WebClientPrint::WCPP_SET_PRINTERS]) > 0 ? $qs[WebClientPrint::WCPP_SET_PRINTERS] : '');
            return;
        }
        else if ($reqType == WebClientPrint::ClientSetInstalledPrintersInfo)
        {
            //WCPP Utility is sending the installed printers at client side with detailed info
            //so store this info with the specified session ID
            //Printers Info is in JSON format
            $printersInfo = $_POST['printersInfoContent'];
             
            WebClientPrint::cacheAdd($sid, WebClientPrint::WCP_CACHE_PRINTERSINFO, $printersInfo);
            return;
        }
        else if ($reqType == WebClientPrint::ClientGetWcppVersion)
        {
            //return the WCPP version for the specified Session ID (sid) if any
            ob_start();
            ob_clean();
            header('Content-type: text/plain');
            echo WebClientPrint::cacheGet($sid, WebClientPrint::WCP_CACHE_WCPP_VER);
            return;    
        }
        else if ($reqType == WebClientPrint::ClientGetInstalledPrinters)
        {
            //return the installed printers for the specified Session ID (sid) if any
            ob_start();
            ob_clean();
            header('Content-type: text/plain');
            echo base64_decode(WebClientPrint::cacheGet($sid, WebClientPrint::WCP_CACHE_PRINTERS));
            return;
        }    
        else if ($reqType == WebClientPrint::ClientGetInstalledPrintersInfo)
        {
            //return the installed printers with detailed info for the specified Session ID (sid) if any
            ob_start();
            ob_clean();
            header('Content-type: text/plain');
            echo base64_decode(WebClientPrint::cacheGet($sid, WebClientPrint::WCP_CACHE_PRINTERSINFO));
            return;
        }    
    }
    catch (Exception $ex)
    {
        throw $ex;
    }
     
}

• Create a new PHP file and name it StoreImageFileController.php and then copy/paste the following code:

<?php

//generate random file name
$randFileName = 'MyFile'.uniqid();
//save image file on root website folder
file_put_contents($randFileName, $_POST['base64ImageContent']);
//return file name back to client
ob_start();
ob_clean();
header('Content-type: text/plain');
echo $randFileName;
ob_end_flush();
exit();

• Create a new PHP file and name it PrintHtmlCardController.php and then copy/paste the following code:

<?php

include 'WebClientPrint.php';

use Neodynamic\SDK\Web\WebClientPrint;
use Neodynamic\SDK\Web\DefaultPrinter;
use Neodynamic\SDK\Web\InstalledPrinter;
use Neodynamic\SDK\Web\PrintFile;
use Neodynamic\SDK\Web\ClientPrintJob;

// Process request
// Generate ClientPrintJob? only if clientPrint param is in the query string
$urlParts = parse_url($_SERVER['REQUEST_URI']);

if (isset($urlParts['query'])) {
    $rawQuery = $urlParts['query'];
    parse_str($rawQuery, $qs);
    if (isset($qs[WebClientPrint::CLIENT_PRINT_JOB])) {

        $useDefaultPrinter = ($qs['useDefaultPrinter'] === 'checked');
        $printerName = urldecode($qs['printerName']);
    
        $filePath = $qs['imageFileName'];
        
        //create a temp file name for our image file...

        //Because we know the Card size is 3.125in x 4.17in, we can specify 
        //it through a special format in the file name (see http://goo.gl/upaazT) so the
        //printing output size is honored; otherwise the output will be sized to Page Width & Height
        //specified by the printer driver default setting
        $fileName = 'MyFile'.uniqid().'-PW=3.125-PH=4.17'.'.png';
            

        //Create a ClientPrintJob obj that will be processed at the client side by the WCPP
        $cpj = new ClientPrintJob();
        //Create a PrintFile object with the PNG file
        $cpj->printFile = new PrintFile($filePath, $fileName, null);
        if ($useDefaultPrinter || $printerName === 'null'){
            $cpj->clientPrinter = new DefaultPrinter();
        }else{
            $cpj->clientPrinter = new InstalledPrinter($printerName);
        }

		//Send ClientPrintJob back to the client
		ob_start();
		ob_clean();
		header('Content-type: application/octet-stream');
		echo $cpj->sendToClient();
		ob_end_flush();
		exit();
        
    }
}

Creating Web Pages

• The default page is for detecting whether the client machine has the WebClientPrint Processor (WCPP) Utility installed. Create a new PHP page and name it index.php. Then copy/paste the following code:

<?php
  session_start();
  
  include 'WebClientPrint.php';
  use Neodynamic\SDK\Web\WebClientPrint;
  
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Detecting WebClientPrint Processor...</title>
        
        <style>
        body{font: 13px 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;}        
        </style>
    
    </head>
    <body>
        <div id="msgInProgress">
            <div id="mySpinner" style="width:32px;height:32px"></div>
            <br />
            Detecting WCPP utility at client side... 
            <br />
            Please wait a few seconds...
            <br />
        </div>
        <div id="msgInstallWCPP" style="display:none;">    
            <h3>#1 Install WebClientPrint Processor (WCPP)!</h3>
            <p>
                <strong>WCPP is a native app (without any dependencies!)</strong> that handles all print jobs 
                generated by the <strong>WebClientPrint PHP component</strong> at the server side. The WCPP 
                is in charge of the whole printing process and can be 
                installed on <strong>Windows, Linux, Raspberry Pi & Mac!</strong>
            </p>
            <p>
                <a href="http://www.neodynamic.com/downloads/wcpp/" target="_blank">Download and Install WCPP from Neodynamic website</a><br />                
            </p>         
            <h3>#2 After installing WCPP...</h3>
            <p>
                <a href="PrintHtmlCard.php">You can go and test the printing page</a>
            </p>

        </div>
        
        <!-- Add Reference to jQuery at Google CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        
        

        <script type="text/javascript">

            var wcppPingTimeout_ms = 60000; //60 sec
            var wcppPingTimeoutStep_ms = 500; //0.5 sec

            function wcppDetectOnSuccess(){
                // WCPP utility is installed at the client side
                // redirect to WebClientPrint sample page

                // get WCPP version
                var wcppVer = arguments[0];
                if(wcppVer.substring(0, 1) == "6")
                    window.location.href = "PrintHtmlCard.php";
                else //force to install WCPP v6.0
                    wcppDetectOnFailure();
            }

            function wcppDetectOnFailure() {
                // It seems WCPP is not installed at the client side
                // ask the user to install it
                $('#msgInProgress').hide();
                $('#msgInstallWCPP').show();                
            }

            

        </script>
        
        <?php
        
        //Get Absolute URL of this page
        $currentAbsoluteURL = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://";
        $currentAbsoluteURL .= $_SERVER["SERVER_NAME"];
        if($_SERVER["SERVER_PORT"] != "80" && $_SERVER["SERVER_PORT"] != "443")
        {
            $currentAbsoluteURL .= ":".$_SERVER["SERVER_PORT"];
        } 
        $currentAbsoluteURL .= $_SERVER["REQUEST_URI"];
    
        //WebClientPrinController.php is at the same page level as WebClientPrint.php
        $webClientPrintControllerAbsoluteURL = substr($currentAbsoluteURL, 0, strrpos($currentAbsoluteURL, '/')).'/WebClientPrintController.php';

        // Create WCPP detection script
        echo WebClientPrint::createWcppDetectionScript($webClientPrintControllerAbsoluteURL, session_id());

        ?>
    </body>
</html>

• Add a new PHP page and name it PrintHtmlCard.php. Copy/paste the following code:

<?php 
    session_start();

    include 'WebClientPrint.php';
    use Neodynamic\SDK\Web\WebClientPrint;
?>

<!DOCTYPE html>
<html>
<head>
    <title>How to directly Print HTML Content without Preview or Printer Dialog</title>
</head>
<body>
    <!-- Store User's SessionId -->
    <input type="hidden" id="sid" name="sid" value="<?php echo session_id(); ?>" />
    
    <h2>Print HTML Card</h2>

    <p>This card is 300px x 400px ⇔ 3.125in x 4.17in (300/96 and 400/96 respectivelly)</p>

    <div id="card" style="width: 300px; height:400px; border-radius: 10px; background-color:antiquewhite;">
        <img src="data:image/png;base64,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" alt="Avatar" style="width:100%;border-radius: 10px 10px 0 0;">
        <div style="padding: 2px 16px;">
            <h3 style="font:bold 20px Arial">John Doe</h3>
            <p style="font:normal 14px Arial">Architect & Engineer</p>
        </div>
    </div>

    <div>
        <label class="checkbox">
            <input type="checkbox" id="useDefaultPrinter" /> <strong>Print to Default printer</strong> or...
        </label>
    </div>

    <div id="loadPrinters">
        Click to load and select one of the installed printers!
        <br />
        <input type="button" onclick="javascript:jsWebClientPrint.getPrinters();" value="Load installed printers..." />
        <br /><br />
    </div>

    <div id="installedPrinters" style="visibility:hidden">
        <label for="installedPrinterName">Select an installed Printer:</label>
        <select name="installedPrinterName" id="installedPrinterName"></select>
    </div>

    <script type="text/javascript">
        var wcppGetPrintersTimeout_ms = 60000; //60 sec
        var wcppGetPrintersTimeoutStep_ms = 500; //0.5 sec

	    function wcpGetPrintersOnSuccess() {
		    // Display client installed printers
		    if (arguments[0].length > 0) {
			    var p = arguments[0].split("|");
			    var options = '';
			    for (var i = 0; i < p.length; i++) {
				    options += '<option>' + p[i] + '</option>';
			    }
			    $('#installedPrinters').css('visibility', 'visible');
			    $('#installedPrinterName').html(options);
			    $('#installedPrinterName').focus();
			    $('#loadPrinters').hide();
		    } else {
			    alert("No printers are installed in your system.");
		    }
	    }
	    function wcpGetPrintersOnFailure() {
		    // Do something if printers cannot be got from the client
		    alert("No printers are installed in your system.");
	    }
    </script>

    <br />


    <input id="printBtn" type="button" style="font-size:18px" value="Print HTML Card..." />

    
    // Add Reference to jQuery at Google CDN 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

    <?php
    //Get Absolute URL of this page
    $currentAbsoluteURL = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://";
    $currentAbsoluteURL .= $_SERVER["SERVER_NAME"];
    if($_SERVER["SERVER_PORT"] != "80" && $_SERVER["SERVER_PORT"] != "443")
    {
        $currentAbsoluteURL .= ":".$_SERVER["SERVER_PORT"];
    } 
    $currentAbsoluteURL .= $_SERVER["REQUEST_URI"];
    
    //WebClientPrinController.php is at the same page level as WebClientPrint.php
    $webClientPrintControllerAbsoluteURL = substr($currentAbsoluteURL, 0, strrpos($currentAbsoluteURL, '/')).'/WebClientPrintController.php';
    
    //PrintHtmlCardController.php is at the same page level as WebClientPrint.php
    $printHtmlCardControllerAbsoluteURL = substr($currentAbsoluteURL, 0, strrpos($currentAbsoluteURL, '/')).'/PrintHtmlCardController.php';
    
    //Specify the ABSOLUTE URL to the WebClientPrintController.php and to the file that will create the ClientPrintJob object
    echo WebClientPrint::createScript($webClientPrintControllerAbsoluteURL, $printHtmlCardControllerAbsoluteURL, session_id());
    ?>
       
    // REFERENCE to html2canvas utility https://github.com/niklasvh/html2canvas
    <script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.5/html2canvas.min.js" type="text/javascript"></script>

    
    // HTML Printing Logic

    <script>
    $(document).ready(function(){
        $("#printBtn").click(function () {

            //1. generate an image of HTML content through html2canvas utility
            html2canvas(document.getElementById('card'), { scale: 5 }).then(function (canvas) {

                var b64Prefix = "data:image/png;base64,";
                var imgBase64DataUri = canvas.toDataURL("image/png");
                var imgBase64Content = imgBase64DataUri.substring(b64Prefix.length, imgBase64DataUri.length);

                //2. save image base64 content to server-side Application Cache
                $.ajax({
                    type: "POST",
                    url: 'StoreImageFileController.php',
                    data: { base64ImageContent : imgBase64Content},
                    success: function (imgFileName) {
                        //alert("The image file: " + imgFileName + " was created at server side. Continue printing it...");

                        //2. Print the stored image file specifying the created file name
                        jsWebClientPrint.print('useDefaultPrinter=' + $('#useDefaultPrinter').attr('checked') + '&printerName=' + $('#installedPrinterName').val() + '&imageFileName=' + imgFileName);
                    }
                });

               
            });

        });
    });
    </script>

</body>
</html>

WebClientPrint Setup for Laravel 8+

• Create a new folder called WebClientPrint under app folder of your project

• Copy the WebClientPrint.php to that WebClientPrint folder

• Create a new folder called wcpcache under the WebClientPrint folder

Creating Controllers

• Add a new Controller to your project and name it WebClientPrintController.php. Then copy/paste the following code:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
//*********************************
// IMPORTANT NOTE 
// 1. In this sample we store users related stuff (like
// the list of printers and whether they have the WCPP 
// client utility installed) in the wcpcache folder BUT 
// you can change it to another different storage (like a DB)!
// which will be required in Load Balacing scenarios
// 
// 2. If your website requires user authentication, then
// THIS FILE MUST be set to ALLOW ANONYMOUS access!!!
//
// 3. EXCLUDE this Controller from CSRF Protection
// Ref https://laravel.com/docs/5.5/csrf#csrf-excluding-uris
//*********************************
 
//Includes WebClientPrint classes
include_once(app_path() . '\WebClientPrint\WebClientPrint.php');
use Neodynamic\SDK\Web\WebClientPrint;
 
 
class WebClientPrintController extends Controller
{
 
    public function processRequest(Request $request){
 
         
        //IMPORTANT SETTINGS:
        //===================
        //Set wcpcache folder RELATIVE to WebClientPrint.php file
        //FILE WRITE permission on this folder is required!!!
        WebClientPrint::$wcpCacheFolder = app_path() . '/WebClientPrint/wcpcache/';
        //===================
 
        // Clean built-in Cache
        // NOTE: Remove it if you implement your own cache system
        WebClientPrint::cacheClean(30); //in minutes
 
        //get session id from querystring if any
        $sid = NULL;
        if ($request->has(WebClientPrint::SID)){
            $sid = $request->input(WebClientPrint::SID);
        }
         
        try{
            //get query string from url
            $query = substr($request->fullUrl(), strpos($request->fullUrl(), '?')+1);
            //get request type
            $reqType = WebClientPrint::GetProcessRequestType($query);
             
            if($reqType == WebClientPrint::GenPrintScript ||
            $reqType == WebClientPrint::GenWcppDetectScript){
                //Let WebClientPrint to generate the requested script
                 
                //Get Absolute URL of this file
                $currentAbsoluteURL = substr($request->fullUrl(), 0, strrpos($request->fullUrl(), '?'));
                 
                // Return WebClientPrint's javascript code 
                return response(WebClientPrint::generateScript($currentAbsoluteURL, $query))
                        ->header('Content-Type', 'text/javascript');
                 
            } 
            else if ($reqType == WebClientPrint::ClientSetWcppVersion)
            {
                //This request is a ping from the WCPP utility
                //so store the session ID indicating this user has the WCPP installed
                //also store the WCPP Version if available
                if($request->has(WebClientPrint::WCPP_SET_VERSION) && strlen($request->input(WebClientPrint::WCPP_SET_VERSION)) > 0){
                    WebClientPrint::cacheAdd($sid, WebClientPrint::WCP_CACHE_WCPP_VER, $request->input(WebClientPrint::WCPP_SET_VERSION));
                }
                return;
            }
            else if ($reqType == WebClientPrint::ClientSetInstalledPrinters)
            {
                //WCPP Utility is sending the installed printers at client side
                //so store this info with the specified session ID
                WebClientPrint::cacheAdd($sid, WebClientPrint::WCP_CACHE_PRINTERS, strlen($request->input(WebClientPrint::WCPP_SET_PRINTERS)) > 0 ? $request->input(WebClientPrint::WCPP_SET_PRINTERS) : '');
                return;
            }
            else if ($reqType == WebClientPrint::ClientSetInstalledPrintersInfo)
            {
                //WCPP Utility is sending the installed printers at client side with detailed info
                //so store this info with the specified session ID
                //Printers Info is in JSON format
                $printersInfo = $request->input('printersInfoContent');
                 
                WebClientPrint::cacheAdd($sid, WebClientPrint::WCP_CACHE_PRINTERSINFO, $printersInfo);
                return;
            }
            else if ($reqType == WebClientPrint::ClientGetWcppVersion)
            {
                //return the WCPP version for the specified Session ID (sid) if any
                return response(WebClientPrint::cacheGet($sid, WebClientPrint::WCP_CACHE_WCPP_VER))
                        ->header('Content-Type', 'text/plain');                 
            }
            else if ($reqType == WebClientPrint::ClientGetInstalledPrinters)
            {
                //return the installed printers for the specified Session ID (sid) if any
                return response(base64_decode(WebClientPrint::cacheGet($sid, WebClientPrint::WCP_CACHE_PRINTERS)))
                        ->header('Content-Type', 'text/plain'); 
            }    
            else if ($reqType == WebClientPrint::ClientGetInstalledPrintersInfo)
            {
                //return the installed printers with detailed info for the specified Session ID (sid) if any
                return response(base64_decode(WebClientPrint::cacheGet($sid, WebClientPrint::WCP_CACHE_PRINTERSINFO)))
                        ->header('Content-Type', 'text/plain'); 
            }    
        }
        catch (Exception $ex)
        {
            throw $ex;
        }
 
    }
     
}

• Exclude WebClientPrintAPIController & StoreImageFileController (we'll be creating it later) from CSRF Protection by editing app\Http\Middleware\VerifyCsrfToken.php so it looks like the following code:

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'WebClientPrintController',
		'StoreImageFileController'
    ];
}

• Edit the HomeController so it looks like the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Session;

//Includes WebClientPrint classes
include_once(app_path() . '\WebClientPrint\WebClientPrint.php');
use Neodynamic\SDK\Web\WebClientPrint;


class HomeController extends Controller
{
    public function index(){

        $wcppScript = WebClientPrint::createWcppDetectionScript(action('WebClientPrintController@processRequest'), Session::getId());    

        return view('home.index', ['wcppScript' => $wcppScript]);
    }

    public function printHtmlCard(){
		
		$wcpScript = WebClientPrint::createScript(action('WebClientPrintController@processRequest'), action('PrintHtmlCardController@printFile'), Session::getId());  
		
        return view('home.printHtmlCard', ['wcpScript' => $wcpScript]);
    }
    
}

• Add a new Controller and name it StoreImageFileController and paste the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Session;

class StoreImageFileController extends Controller
{
    public function createFile(Request $request){
       //generate random file name
        $randFileName = 'MyFile'.uniqid();
        //save image file on root website folder
        file_put_contents($randFileName, base64_decode($request->input('base64ImageContent')));
        //return file name back to client
        return response($randFileName)
						->header('Content-Type', 'text/plain');
        
    }    
    
}

• Add a new Controller and name it PrintHtmlCardController and paste the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;


//*********************************
// IMPORTANT NOTE 
// ==============
// If your website requires user authentication, then
// THIS FILE MUST be set to ALLOW ANONYMOUS access!!!
//
//*********************************

//Includes WebClientPrint classes
include_once(app_path() . '\WebClientPrint\WebClientPrint.php');
use Neodynamic\SDK\Web\WebClientPrint;
use Neodynamic\SDK\Web\Utils;
use Neodynamic\SDK\Web\DefaultPrinter;
use Neodynamic\SDK\Web\InstalledPrinter;
use Neodynamic\SDK\Web\PrintFile;
use Neodynamic\SDK\Web\ClientPrintJob;

use Session;

class PrintHtmlCardController extends Controller
{
    public function printFile(Request $request){
        
       if ($request->exists(WebClientPrint::CLIENT_PRINT_JOB)) {

            $useDefaultPrinter = ($request->input('useDefaultPrinter') === 'checked');
            $printerName = urldecode($request->input('printerName'));
            
            $filePath = $request->input('imageFileName');
        
            //create a temp file name for our image file...

            //Because we know the Card size is 3.125in x 4.17in, we can specify 
            //it through a special format in the file name (see http://goo.gl/upaazT) so the
            //printing output size is honored; otherwise the output will be sized to Page Width & Height
            //specified by the printer driver default setting
            $fileName = 'MyFile'.uniqid().'-PW=3.125-PH=4.17'.'.png';
            

			//Create a ClientPrintJob obj that will be processed at the client side by the WCPP
            $cpj = new ClientPrintJob();
            //Create a PrintFile object with the PNG file
            $cpj->printFile = new PrintFile($filePath, $fileName, null);
            if ($useDefaultPrinter || $printerName === 'null'){
                $cpj->clientPrinter = new DefaultPrinter();
            }else{
                $cpj->clientPrinter = new InstalledPrinter($printerName);
            }
		
			//Send ClientPrintJob back to the client
			return response($cpj->sendToClient())
						->header('Content-Type', 'application/octet-stream');
                
            
        }
    }    
    
}

Creating/Editing Views

• Edit the resources / views / layouts / app.blade.php file so it looks like follows:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WebClientPrint for PHP</title>    
</head>
<body>
    
    <div>
        @yield('body')
	</div>

	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    
    @yield('scripts')

</body>
</html>

• The default View is for detecting whether the client machine has the WebClientPrint Processor (WCPP) Utility installed. Edit the resources / views / home / index.blade.php file and add the folowing section to the BODY:


@extends('layouts.app')

@section('body')
<div id="msgInProgress">
    
    <h3>Detecting WCPP utility at client side...</h3>
    <h3>Please wait a few seconds...</h3>
    <br />
</div>
<div id="msgInstallWCPP" style="display:none;">
    <h3>#1 Install WebClientPrint Processor (WCPP)!</h3>
    <p>
        <strong>WCPP is a native app (without any dependencies!)</strong> that handles all print jobs
        generated by the <strong>WebClientPrint for PHP component</strong> at the server side. The WCPP
        is in charge of the whole printing process and can be
        installed on <strong>Windows, Linux, Mac & Raspberry Pi!</strong>
    </p>
    <p>
        <a href="//www.neodynamic.com/downloads/wcpp/" target="_blank" >Download and Install WCPP from Neodynamic website</a><br />
    </p>
    <h3>#2 After installing WCPP...</h3>
    <p>
        <a href="{{action('HomeController@printHtmlCard')}}" >You can go and test the printing page...</a>
    </p>

</div>
@endsection

@section('scripts')
<script type="text/javascript">

    var wcppPingTimeout_ms = 60000; //60 sec
    var wcppPingTimeoutStep_ms = 500; //0.5 sec
                 
    function wcppDetectOnSuccess(){
        // WCPP utility is installed at the client side
        // redirect to WebClientPrint sample page
                
        // get WCPP version
        var wcppVer = arguments[0];
        if(wcppVer.substring(0, 1) == "6")
            window.location.href = '{{action('HomeController@printHtmlCard')}}';
        else //force to install WCPP v6.0
            wcppDetectOnFailure();
    }

    function wcppDetectOnFailure() {
        // It seems WCPP is not installed at the client side
        // ask the user to install it
        $('#msgInProgress').hide();
        $('#msgInstallWCPP').show();
    }

</script>


{!! 

// Register the WCPP Detection script code
// The $wcpScript was generated by HomeController@index

$wcppScript;

!!}

@endsection

• Add a new View with the following name and under such folders: resources / views / home / printHtmlCard.blade.php Then, copy/paste the folowing code:


@extends('layouts.app')

@section('body')

<h2>Print HTML Card</h2>

<p>This card is 300px x 400px ⇔ 3.125in x 4.17in (300/96 and 400/96 respectivelly)</p>

<div id="card" style="width: 300px; height:400px; border-radius: 10px; background-color:antiquewhite;">
    <img src="data:image/png;base64,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" alt="Avatar" style="width:100%;border-radius: 10px 10px 0 0;">
    <div style="padding: 2px 16px;">
        <h3 style="font:bold 20px Arial">John Doe</h3>
        <p style="font:normal 14px Arial">Architect & Engineer</p>
    </div>
</div>

<div>
    <label class="checkbox">
        <input type="checkbox" id="useDefaultPrinter" /> <strong>Print to Default printer</strong> or...
    </label>
</div>

<div id="loadPrinters">
    Click to load and select one of the installed printers!
    <br />
    <input type="button" onclick="javascript:jsWebClientPrint.getPrinters();" value="Load installed printers..." />
    <br /><br />
</div>

<div id="installedPrinters" style="visibility:hidden">
    <label for="installedPrinterName">Select an installed Printer:</label>
    <select name="installedPrinterName" id="installedPrinterName"></select>
</div>

<script type="text/javascript">
    var wcppGetPrintersTimeout_ms = 60000; //60 sec
    var wcppGetPrintersTimeoutStep_ms = 500; //0.5 sec

	function wcpGetPrintersOnSuccess() {
		// Display client installed printers
		if (arguments[0].length > 0) {
			var p = arguments[0].split("|");
			var options = '';
			for (var i = 0; i < p.length; i++) {
				options += '<option>' + p[i] + '</option>';
			}
			$('#installedPrinters').css('visibility', 'visible');
			$('#installedPrinterName').html(options);
			$('#installedPrinterName').focus();
			$('#loadPrinters').hide();
		} else {
			alert("No printers are installed in your system.");
		}
	}
	function wcpGetPrintersOnFailure() {
		// Do something if printers cannot be got from the client
		alert("No printers are installed in your system.");
	}
</script>

<br />


<input id="printBtn" type="button" style="font-size:18px" value="Print HTML Card..." />

@endsection

@section('scripts')

{!! 

// Register the WebClientPrint script code
// The $wcpScript was generated by PrintHtmlCardController@index

$wcpScript;

!!}

<!-- REFERENCE to html2canvas utility https://github.com/niklasvh/html2canvas -->
<script src="https://github.com/niklasvh/html2canvas/releases/download/v0.5.0-beta4/html2canvas.min.js" type="text/javascript"></script>

    
<!-- HTML Printing Logic -->

<script>
$(document).ready(function(){
    $("#printBtn").click(function () {

        //1. generate an image of HTML content through html2canvas utility
        html2canvas($('#card')).then(function (canvas) {

            var b64Prefix = "data:image/png;base64,";
            var imgBase64DataUri = canvas.toDataURL("image/png");
            var imgBase64Content = imgBase64DataUri.substring(b64Prefix.length, imgBase64DataUri.length);

            //2. save image base64 content to server-side Application Cache
            $.ajax({
                type: "POST",
                url: "{{action('StoreImageFileController@createFile')}}",
                data: { base64ImageContent : imgBase64Content},
                success: function (imgFileName) {
                    //alert("The image file: " + imgFileName + " was created at server side. Continue printing it...");

                    //2. Print the stored image file specifying the created file name
                    jsWebClientPrint.print('useDefaultPrinter=' + $('#useDefaultPrinter').attr('checked') + '&printerName=' + $('#installedPrinterName').val() + '&imageFileName=' + imgFileName);
                }
            });

               
        });

    });
});
</script>

@endsection

• Finally, add the following routes to routes / web.php


Route::get('/', 'HomeController@index');
Route::get('home', 'HomeController@index');
Route::get('home/index', 'HomeController@index');
Route::get('home/printHtmlCard', 'HomeController@printHtmlCard');
Route::any('PrintHtmlCardController', 'PrintHtmlCardController@printFile');
Route::any('StoreImageFileController', 'StoreImageFileController@createFile');
Route::any('WebClientPrintController', 'WebClientPrintController@processRequest');

• Edit the app\Providers\RouteServiceProvider.php and uncommet the line protected $namespace = 'App\\Http\\Controllers';

That's it! Run your website and test it.

JS Print Manager
Printing Solution for Any Web Platform

WebClientPrint
RAW & File Printing for ASP.NET & PHP

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK
Convert, Preview & Render EPL to Image & PDF

Virtual ZPL Printer Driver
Convert, Print, Preview & Render ZPL

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK
Convert, Preview & Render EPL to Image & PDF

Virtual ZPL Printer Driver
Convert, Print, Preview & Render ZPL

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK
Convert, Preview & Render EPL to Image & PDF

Virtual ZPL Printer Driver
Convert, Print, Preview & Render ZPL

Print HTML from PHP directly to the client printer without print dialog or silent mode

Overview

John Doe

Requirements

Development/Server-side

Client-side

Follow up these steps

Creating Controllers

Creating Web Pages

WebClientPrint Setup for Laravel 8+

Creating Controllers

Creating/Editing Views

Useful? Share it!

Related Articles

Need help? Contact Support

Barcode Professional Encoder / Writer / Generator

ThermalLabel Design & Print Barcode Thermal Labels

Web Printing Solutions

JS Print Manager Printing Solution for Any Web Platform

WebClientPrint RAW & File Printing for ASP.NET & PHP

Printer Emulator SDKs

ZPL Printer Emulator SDK Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK Convert, Preview & Render EPL to Image & PDF

Virtual Printer Drivers

Virtual ZPL Printer Driver Convert, Print, Preview & Render ZPL

On-Premise Web APIs for Docker

Barcode Professional Encoder / Writer / Generator

ThermalLabel Design & Print Barcode Thermal Labels

JS Print Manager Printing Solution for Any Web Platform

WebClientPrint RAW & File Printing for ASP.NET & PHP

Download Printer Emulator SDKs

ZPL Printer Emulator SDK Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK Convert, Preview & Render EPL to Image & PDF

Download Virtual Printer Drivers

Virtual ZPL Printer Driver Convert, Print, Preview & Render ZPL

Download On-Premise Web APIs for Docker

Barcode Professional Encoder / Writer / Generator

ThermalLabel Design & Print Barcode Thermal Labels

ZPL Printer Emulator SDK Convert, Preview & Render ZPL to Image & PDF

JS Print Manager Printing Solution for Any Web Platform

WebClientPrint RAW & File Printing for ASP.NET & PHP

Barcode Professional Encoder / Writer / Generator

ThermalLabel Design & Print Barcode Thermal Labels

JS Print Manager Printing Solution for Any Web Platform

WebClientPrint RAW & File Printing for ASP.NET & PHP

Buy Printer Emulator SDKs

ZPL Printer Emulator SDK Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK Convert, Preview & Render EPL to Image & PDF

Buy Virtual Printer Drivers

Virtual ZPL Printer Driver Convert, Print, Preview & Render ZPL

Buy On-Premise Web APIs for Docker

Print HTML from PHP directly to the client printer without print dialog or silent mode

Overview

John Doe

Requirements

Development/Server-side

Client-side

Follow up these steps

Creating Controllers

Creating Web Pages

WebClientPrint Setup for Laravel 8+

Creating Controllers

Creating/Editing Views

Useful? Share it!

Related Articles

Need help? Contact Support

Barcode Professional
Encoder / Writer / Generator

ThermalLabel
Design & Print Barcode Thermal Labels

JS Print Manager
Printing Solution for Any Web Platform

WebClientPrint
RAW & File Printing for ASP.NET & PHP

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK
Convert, Preview & Render EPL to Image & PDF

Virtual ZPL Printer Driver
Convert, Print, Preview & Render ZPL

Barcode Professional
Encoder / Writer / Generator

ThermalLabel
Design & Print Barcode Thermal Labels

JS Print Manager
Printing Solution for Any Web Platform

WebClientPrint
RAW & File Printing for ASP.NET & PHP

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK
Convert, Preview & Render EPL to Image & PDF

Virtual ZPL Printer Driver
Convert, Print, Preview & Render ZPL

Barcode Professional
Encoder / Writer / Generator

ThermalLabel
Design & Print Barcode Thermal Labels

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

JS Print Manager
Printing Solution for Any Web Platform

WebClientPrint
RAW & File Printing for ASP.NET & PHP

Barcode Professional
Encoder / Writer / Generator

ThermalLabel
Design & Print Barcode Thermal Labels

JS Print Manager
Printing Solution for Any Web Platform

WebClientPrint
RAW & File Printing for ASP.NET & PHP

ZPL Printer Emulator SDK
Convert, Preview & Render ZPL to Image & PDF

EPL Printer Emulator SDK
Convert, Preview & Render EPL to Image & PDF

Virtual ZPL Printer Driver
Convert, Print, Preview & Render ZPL