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 .

Add these javascript modules to the page:

            <script src="https://cdn.jsdelivr.net/npm/scriptxprint-html@1/dist/meadco-scriptxservicesprint.min.js"></script>
        

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

 ScriptX.Print dependencies

As of v1.15 the ScriptX.Services client libraries have no dependencies on other libraries.

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 identifier is always required as the ScriptX.Services server is at different url to the server from which the document requesting the print originated and will therefore be subject to cross origin restrictions on scripting. The server will allow calls from origins with a valid identifier.

            
                'use strict';
                MeadCo.ScriptX.Print.HTML.connectAsync(
                    "https://scriptxservices.meadroid.com/",
                    "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", 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", async () => {
            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();

            try {
                // wait for the document to be returned
                await MeadCo.ScriptX.WaitForSpoolingComplete();
                hideBusyModal();
            } catch (e) {
                hideBusyModal();
                alert("An error occurred while printing\n\n" + e);
            }

        });

        MeadCo.ScriptX.Print.HTML.connectAsync(
            "https://scriptxservices.meadroid.com/",
            "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", function () { });
    

Done!

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