Working with client generated 'modern' html

Typically, ScriptX is used to print the whole of the document displayed in the current window or frame or a document downloaded from a server.

The printing of 'snippets' of HTML or documents constructed using javascript on the client device is possible by using the "html://" pseudo protocol. "html://" is recognised by the ScriptX method PrintHtml() as a request to print the remainder of the string as HTML.

When the PrintHTML method is used, headers, footers, papersize etc etc, i.e. all the usual formatting and presentation properties are used to print the given HTML 'snippet'/document:

PrintHTMLEx() is PrintHTML() with information

This sample uses the PrintHTMLEx() API as it provides for progress callbacks. The sample uses these to show the progress in the log window. The only difference between the APIs is the addition of the callback function and callback data.

Content using modern css (transform)

ScriptX 8 and ScriptX.Services have a new implementation of PrintHTML() that supports modern content - to use this new implementation modern standards are enabled by starting the content string with <!DOCTYPE html>.

ScriptX.Services always enables modern standards; <!DOCTYPE html> is always applied to any snippet of html to be printed.

For this reason the .Addon emulation libraries for ScriptX.Services strip out any pseudo protocol (html://, html4://, html5://) and <!DOCTYPE html> included in the snippet to be printed.

The samples on this page show that ScriptX.Services always produces correct content and that code can be written that behaves in the same way with both ScriptX.Addon and Script.Services.

A string can be printed:

<div style="white-space:nowrap;height:10mm;position:absolute;right:-9mm;top:10mm;width:30mm;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);"><span>Hello world</span></div>

The above prints "Hello World" rotated to run down the top right hand side of the page.

function printSnippet() {
    var snippet = "<div style="white-space:nowrap;height:10mm;position:absolute;right:-9mm;top:10mm;width:30mm;
                    -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg);transform:rotate(90deg);
                    "><span>Hello world</span></div>";

    // we recommend constructing a well formed document ...
    factory.printing.PrintHtmlEx(
        "html://<!DOCTYPE html><head></head><body>" + 
        snippet + 
        "</body></html>");
}

A document snippet can be printed:

Using a transform property

Sample rotated div

The style for the rotated <div /> that is printed is declared by use of a <style /> element within the <div /> to be printed and is hence included in the html snippet to be printed.

The above section is printed with the following code:

$("#btnPrintSnippet1").click(function () {
    var html = "<!DOCTYPE html><html><head></head><body>";
    html += $("#contentToPrint").html();
    html += "</body></html>";
    MeadCo.ScriptX.Printing.PrintHTML("html://" + html, true);
});

Without <!DOCTYPE html> it does not print correctly:

It does print correctly with ScriptX.Services.

$("#btnPrintSnippet1").click(function () {
    var html = "<html><head></head><body>";
    html += $("#contentToPrint").html();
    html += "</body></html>";
    MeadCo.ScriptX.Printing.PrintHTML("html://" + html, true);
});

Without <!DOCTYPE html> but using html5:// instead of html:// it does print correctly (and with ScriptX.Services):

$("#btnPrintSnippet1").click(function () {
    var html = "<html><head></head><body>";
    html += $("#contentToPrint").html();
    html += "</body></html>";
    MeadCo.ScriptX.Printing.PrintHTML("html5://" + html, true);
});