Evaluate ScriptX.Services with code

ScriptX.Services is for use within web applications within any browser. The use of ScriptX.Services provides scripted control of a printing experience within the browser including allowing a choice of the output printer, orientation, page header and footers etc and the initiation of printing.

On the client, ScriptX.Services is a javascript module that communicates with a service using an Open API.

That service can be anywhere: public cloud, private on-premise server or or as a //localhost service on end users' Intel‑based Windows PCs. The client can be running in nearly any browser with javascript enabled, running on any operating system on any device with a network or internet connection.

You can evaluate using ScriptX.Services with your own code to provide consistent output and control over printing of your own HTML content using our Zero install cloud‑hosted service ScriptX.Services for Cloud.

This FREE service generates PDF documents from your HTML with headers, footers, scaling, margins etc specified by javascript on your web pages (see below).

Sign up for a zero install Free ScriptX.Services for Cloud license so you can evaluate ScriptX.Services on your own production or development website.

This page provides an introduction to adding the use of ScriptX.Services for Cloud to your own pages to provide a "download as PDF" feature on your web pages:

1. Reference the javascript library and dependencies,
2. Add code to configure the library,
3. Add code to describe required settings such as margins, headers and footers,
4. Add a print button to your page,
5. Connect the print button click event to the ScriptX.Services code using your favourite technique,
6. Done!

A worked example - this page

We'll do things in a slightly different order.

This page has a 'Download to PDF' button, as do other pages on the site. The download is obtained by using ScriptX.Services to `print` this document to a PDF and then provide the `printed file` as a download.

To show that we arent cheating and using a pre-prepared file for download the page includes some form fields so you can customise the print. Also note that the date and time on the PDF will be the time you requested the 'print'.

The UI :: the print button

The button is standard html styled with some Bootstrap css and Font Awesome:

    
        <button type="button"
                class="btn btn-primary d-print-none"
                id="btn_printPage">
            <i class="fas fa-cloud-download-alt"></i>  Download as PDF
        </button>
    

Wire up an event handler

We won't use any library to help us though obviously we could as they all resolve to being an abstraction on the underlying DOM:

    
        <script type="text/javascript" defer="true">
        document.getElementById("btn_printPage")
            .addEventListener("click",function(event) {
                console.log("Print button clicked");
            });
        </script>
    

At this point we have a button which when clicked writes an information line to the console.

Reference the ScriptX.Services javascript modules

The client part of ScriptX.Services is written entirely in javascript and is delivered to client browsers in the usual way viz. a <script /> tag with src attribute referencing the location of the script. There is no 'pre-deployment' or deployment or installation step required as with ScriptX.Add-on for Internet Explorer.

The MeadCo ScriptX.Services print client modules are available for download from  Github . Packages are also available:  Yarn ,  Nuget .

Add these javascript modules to the page:

    
            <script src="/js/jquery-3.1.1.js"></script>
            <script src="/js/meadco-core-1.12.0.js"></script>
            <script src="/js/meadco-scriptxprint-1.12.0.js"></script>
            <script src="/js/meadco-scriptxprinthtml-1.12.0.js"></script>
    

The whole of MeadCo.ScriptX.Print.HTML is now available to the page.

The sample code above has listed out each individual file for illustration. Use your environment workflow to package these files as desired. Alternatively pre-packed libraries can be downloaded from CDNs:

    
        <!-- ScriptX.Print.Client library requires jquery -->
        <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

        <!-- source MeadCo script files from GitHub using jsDelivr CDN - http://www.jsdelivr.com -->
        <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.12.0/dist/meadco-scriptxservicesprint.min.js" />
    

 ScriptX.Print dependencies

For version 1, ScriptX.Services client libraries depend on jQuery for ajax and some DOM manipulation services so jQuery must be referenced.

Configure ScriptX.Services client

ScriptX.Services client must be configured with two parameters:

1. The url of the ScriptX.Services server.
2. A subscription identifier.

A subscription/license identifier is always required.

                'use strict';
                MeadCo.ScriptX.Print.HTML.connectAsync(
                    "https://scriptxservices.meadroid.com/",
                    "[YOUR_LICENSE_GUID]", function () { });
            
        

Define print parameters and print

Finally, we can put everything together to print the page to a PDF document. The ScriptX.Services client modules will take care of the response from the server will be a file and will download the file when it is ready.

        'use strict';
        document.getElementById("btn_printPage")
        .addEventListener("click", function (event) {
            var settings = MeadCo.ScriptX.Print.HTML.settings;
            settings.header = "ScriptX.Print :: Browser Agnostic Printing";
            settings.footer = "&D&b&p of &P&b&t";
            settings.page.orientation =
            MeadCo.ScriptX.Print.HTML.PageOrientation.PORTRAIT;

            settings.page.units = MeadCo.ScriptX.Print.MeasurementUnits.MM;
            var margins = settings.page.margins;
            margins.left = 12.5;
            margins.top = 12.5;
            margins.bottom = 12.5;
            margins.right = 12.5;

            // print is asynchronous
            MeadCo.ScriptX.Print.HTML.printDocument(false);

            // say we're printing
            showBusyModal();

            // promise-less (i.e. callback) wait for the document to be returned
            // so we can then hide the we're printing dialog
            MeadCo.ScriptX.Print.waitForSpoolingComplete(-1,
                function(result) {
                    hideBusyModal();
                    if ( typeof result === "string" )
                        alert("An error occurred while printing\n\n" + result);
                });
        });

        MeadCo.ScriptX.Print.HTML.connectAsync(
            "https://scriptxservices.meadroid.com/",
            "[YOUR_LICENSE_GUID]", function () { });
    

Replace [YOUR_LICENSE_GUID] with the GUID of your Cloud license. The code enables this button:

Sign up for a zero install Free ScriptX.Services for Cloud license so you can evaluate ScriptX.Services on your own production or development website.

Complete the form and then print. Your form values will be included on the print though the value you enter for password will not print obviously.

Your name

Check and will be checked on print

  Download as PDF

Done!

With ScriptX.Services for On-Premise Devices or ScriptX.Services for Windows PC you get exactly the same features, write almost exactly similar code but:

•  Data never leaves your network
•   You can direct output to physical printers on your premises - so for example, with ScriptX.Services for On-Premise Devices users with mobile devices can produce consistent print results formatted in the way you want on a printer available centrally.

When you are ready to update to your own on‑premise server or local Windows PC, simply download and install the service and then sign up for a Free Trial license . When you receive the license you will need to make couple of small changes to your client code to reference your own servers and license instead of our Cloud‑hosted service and you are good to go.

If you are using source files and/or building your own minimised sets, a script needs to be added. The full set is as follows:

        
    <!-- below are the sources of the required scripts -->
    <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1/src/meadco-core.js"></script>
    <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1/src/meadco-scriptxprint.js"></script>
    <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1/src/meadco-scriptxprinthtml.js"></script>
    <!-- additional file required when working with ScriptX.Services for Windows PC -->
    <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1/src/meadco-scriptxprintlicensing.js"></script>
        
    

Then two lines of code need to be added:

    
        // The changes required to work with 4WPC are these two additional lines since the license is at the client
        // NB: The license ID must be repeated on the two calls.
        // The call to HTML.connectAsync() can use empty argument values as they are given here
        MeadCo.ScriptX.Print.Licensing.connect("http://127.0.0.1:41191", "{e29212c9-3c6f-41ac-8078-4596738fdb59}");
        MeadCo.ScriptX.Print.Licensing.applyAsync("{e29212c9-3c6f-41ac-8078-4596738fdb59}", 0, "warehouse",
            function () {
                // initialise printer information, server and subscription/license values already given
                MeadCo.ScriptX.Print.HTML.connectAsync( 
                    "",
                    "",
                    function () {
                        console.log("ScriptX.Services initialised ok");

                        $("#printerName").text(MeadCo.ScriptX.Print.printerName);
                        $("#buttonbar").show();

                        document.getElementById("btnprint")
                            .addEventListener("click", function (event) {
                                var settings = MeadCo.ScriptX.Print.HTML.settings;
                                settings.header = "ScriptX.Print :: Browser Agnostic Printing";
                                settings.footer = "&D&b&p of &P&b&t";
                                settings.page.orientation =
                                    MeadCo.ScriptX.Print.HTML.PageOrientation.LANDSCAPE;

                                settings.page.units = MeadCo.ScriptX.Print.MeasurementUnits.MM;
                                var margins = settings.page.margins;
                                margins.left = 12.5;
                                margins.top = 12.5;
                                margins.bottom = 12.5;
                                margins.right = 12.5;

                                // print is asynchronous
                                MeadCo.ScriptX.Print.HTML.printDocument(false);

                                // say we're printing
                                showBusyModal();

                                // promise-less (i.e. callback) wait for the document to be returned
                                // so we can then hide the we're printing dialog
                                MeadCo.ScriptX.Print.waitForSpoolingComplete(-1,
                                    function (result) {
                                        hideBusyModal();
                                        if (typeof result === "string")
                                            alert("An error occurred while printing\n\n" + result);
                                    });
                            });
                    }
                );
            },
            function (reason) {
                alert("License could not be used: " + reason);
            }
        );

    

Once more: Done!

The code above is available as a simple sample. View source and copy to your own servers to continue an evaluation.