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 require the general ScriptX.Print libraries and ScriptX add-on anti-polyfill so that the same javascript code (to make your life easier) can work with the ScriptX add-on for IE and with ScriptX.Print in any browser on any device.

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/jquery-3.1.1.min.js" type="text/javascript"></script>
<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 and a helper library that fakes the 'add-on' so that the same code can be used.

<!-- Add ScriptX.Add-on emulation for 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 using jQuery:

<script type="text/javascript">
// SetupPrint
// Initialise print attributes, will be reset when the document closes.
function SetupPrint() {
    var p = MeadCo.ScriptX.Printing;
    p.header = "Print and Preview";
    p.footer = "&D&b&b&p of &P";
    p.orientation = "landscape";
}
$(window).on('load', function() {
    if (MeadCo.ScriptX.Init()) {
        SetupPrint();
        $("#btn-print").click(function() {
            MeadCo.ScriptX.PrintPage(true);
        });
        $("#btn-preview").click(function () {
            MeadCo.ScriptX.PreviewPage(true);
        });
    } else {
        $(".btn-print").prop("disabled", true);
    }
});
</script>