Basic Use :: Print and Preview

When using a printing utility the fundamental feature is starting a print or preview of the content to be printed.

The basic set of features of ScriptX.Print include the print or preview of the current document or any of its frames.

To print, we will use the general ScriptX.Print library and ScriptX Client Library.

With ScriptX.Print we cannot interfere with the standard operation of the browser print UI so we include the print UI on the page:

<div class="panel hidden-print panel-default">
    <div class="panel-heading">CSS styling will hide this UI from the print ...</div>
    <div class="panel-body">
        <button type="button" class="btn btn-default btn-print" id="btn-print">Print ...</button>
        <button type="button" class="btn btn-default btn-print" id="btn-preview">Preview ...</button>
    </div>
</div>

We include a helper library that will hide browser and version differences and wraps some common tasks in easy to use functions. The library can be found on Nuget and Github.

<!-- latest version of ScriptX (add-on) helper library -->
<script src="/scripts/meadco-scriptx-1.10.1" type="text/javascript"></script>

Lastly we need the javascript helper libraries that implement calling the ScriptX.Print.HTML WebAPI.

<!-- Add ScriptX.Services libraries -->
<script data-meadco-server="https://scriptxservices.meadroid.com/" 
        data-meadco-license="xxx-xxx-xxxxxxx-xxx" 
        src="/scripts/meadco-scriptxservices.min.js"></script>

And finally we glue everything together with simple script:

<script type="text/javascript">
// SetupPrint
// Initialise print attributes
function SetupPrint() {
    const p = MeadCo.ScriptX.Printing;
    p.header = "Basic Use :: Print and Preview";
    p.footer = "&D&b&b&p of &P";
    p.orientation = "landscape";
}

window.addEventListener('load', async () => {
    try {
        await MeadCo.ScriptX.InitAsync();

        SetupPrint();
        document.getElementById("btn-print").addEventListener("click", function () {
            MeadCo.ScriptX.PrintPage(true);
        });
        document.getElementById("btn-preview").addEventListener("click", function () {
            MeadCo.ScriptX.PreviewPage(true);
        });
    }
    catch (error) {
        app.Messages.PrintErrorBox(error);
        document.querySelectorAll(".btn-print").forEach(function (button) {
            button.disabled = true;
        });
    }
});
</script>