[Win8.1][HTML]WinJS printing page does not see element background color RRS feed

  • Question

  • Hi,

    I am developing windows universal app (Windows 8.1). I am running application on my local machine on win 10.

    My printing functionality works fine, but background color does not work in my markup. 

    I tried:

    background: #B2533F;
    background-color: #B2533F;
    background: rgb(255, 0, 0);
    background-color: rgb(255, 0, 0);
    background: red;
    background-color: red;

    None of this does not work. My printer just do not want to show background color of my document fragment.

    Is there any trick for this which I am not aware of ?



    • Edited by David_FF Wednesday, February 15, 2017 6:27 AM title tag
    Thursday, February 9, 2017 2:38 PM

All replies

  • Hi milosmih86,

    Could you please share the code of the document fragment or a simple project which demonstrates the issue?

    Best Regards,

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, February 10, 2017 12:45 PM
  • Hi David, 

    Below is my whole printer code:

    (function () {
        "use strict";
        var printTaskCompletion;
        /// <summary>
        /// Register for Print contract to enable printing. The user has to manually invoke
        /// the print charm after this function is executed.   
        /// </summary>
        function registerForPrintContract(taskCompletionFunction) {
            //add callback function when printing is completed
            printTaskCompletion = taskCompletionFunction;
            var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
            printManager.addEventListener("printtaskrequested", onPrintTaskRequested, false);
        /// <summary>
        /// Print event handler for printing via the PrintManager API. The user has to manually invoke
        /// the print charm after this function is executed.
        /// </summary>
        /// <param name="printEvent" type="Windows.Graphics.Printing.PrintTaskRequest">
        /// The event containing the print task request object.
        /// </param>
        function onPrintTaskRequested(printEvent) {
            var printTask = printEvent.request.createPrintTask("Event card", function (args) {
                // Register the handler for print task completion event
                if (printTaskCompletion !== undefined) {
                    printTask.oncompleted = printTaskCompletion;
                } else {
                    printTask.oncompleted = onPrintTaskCompleted;
        function printCurrentPage(args) {
            var docHtml = document.createDocumentFragment();
            var docsToPrint = MSApp.getHtmlPrintDocumentSource(docHtml);
            docsToPrint.topMargin = 0;
            docsToPrint.rightMargin = 0;
            docsToPrint.bottomMargin = 0;       
            docsToPrint.leftMargin = 0;          
            docsToPrint.shrinkToFit = false;
        /// <summary>
        /// Create the elements are going to be the document content
        /// </summary>
        function createDocumentContent() {
            var container = document.createElement("div");
            container.innerHTML = "<div style='width: 100%; display: flex; justify-content: center; align-items: center;'>" +
    		                          "<div style='width: 8.5cm; height: 6.2cm; box-sizing: border-box; display: flex; flex-direction: column;'>" +          
    			                          "<div style='margin-top: 33px; font-size: 20px; text-align: center;'>" + WinJS.Application.sessionState.Print_fullName + "</div>" +
    			                          "<div style='margin-top: 20px; font-size: 14px; text-align: center; flex: 1;'>" + WinJS.Application.sessionState.Print_organization + "</div>" +
    			                          "<div style='color: red; background-color: #342455; padding: 10px; font-size: 14px; font-weight: bold;'>" +				                         
    			                          "</div>" +
    		                          "</div>" +
            return container;
        /// <summary>
        /// Print Task event handler is invoked when the print job is completed.
        /// </summary>
        /// <param name="printTaskCompletionEvent" type="Windows.Graphics.Printing.PrintTaskCompleted">
        /// The event containing the print task completion object.
        /// </param>
        function onPrintTaskCompleted(printTaskCompletionEvent) {
            // Notify the user about the failure
              if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
                WinJS.log && WinJS.log("Failed to print.", "sample", "error");
        /// <summary>
        /// Unregister for Print contract. Removes the printing option from the print charm after this function is executed.   
        /// </summary>
        function unregisterForPrintContract() {
            var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
            printManager.onprinttaskrequested = null;
        /// <summary>
        /// Shows the print UI.   
        /// </summary>
        function showPrintUI() {
            return Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
        WinJS.Namespace.define("Print", {
            registerForPrint: registerForPrintContract,
            unregisterForPrint: unregisterForPrintContract,
            showPrintUI: showPrintUI

    Function "createDocumentContent" creates my fragment. Here is just example of background color.

    I tried couple different way and nothing works. Color attribute works, but background not.



    • Edited by milosmih86 Friday, February 10, 2017 2:53 PM
    • Marked as answer by milosmih86 Wednesday, February 15, 2017 11:47 AM
    • Unmarked as answer by milosmih86 Wednesday, February 15, 2017 11:47 AM
    Friday, February 10, 2017 2:51 PM