Working with client generated 'modern' html

Activity log  ::  

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 must be enabled by starting the content string with <!DOCTYPE html>.

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>

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 is included within the <div /> that is 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:

$("#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:

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