Javascript print textarea with text highlighted colors

Question

I have a textarea that displays a report with keywords like "FAIL", "WARNING", "ERROR". I want to be able to print this textarea with the highlighted colors included.

Currently, I am able to print my textarea using the following function (without highlighted colors):

js:

function printTextArea() {
    childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
    childWindow.document.open();
    childWindow.document.write('<html><head></head><body>');
    childWindow.document.write(document.getElementById('textArea').value.replace(/\n/gi,'<br>'));
    childWindow.document.write('</body></html>');

    //this doesn't highlight the text in my print prompt window
    childWindow.document.body.innerHTML.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");

    childWindow.print();
    childWindow.document.close();
    childWindow.close();
}

css:

body {
  -webkit-print-color-adjust: exact !important;
}

.highlight {
  background-color: yellow;
}

Also, when I view the html before the print() I see the correct class appended to my keyword:

<span class='highlight'>FAIL</span>

I'm trying to add the highlight class when writing to the new window and print with highlighted text but it doesn't seem to work. Is there something I am doing wrong?

Miller Cy Chan · Answer 1 · 2018-11-17T02:55:34.157

Because the popup window does not include the css defined in the parent window. For easier to debug, better use variable content to store.
To print it with background highlight, only chrome browser works.
For more information, please refer to Background color not showing in print preview

<html>
<style type="text/css" media="all">
body {
  -webkit-print-color-adjust: exact !important;
}

.highlight {
  background-color: yellow !important;
}
</style>
<script>
function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

function printTextArea() {
    let childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
    childWindow.document.write('<html><head>');
    let styles = document.getElementsByTagName('style');
    for(var i=0; i<styles.length; ++i)
        childWindow.document.write(styles[i].outerHTML);
    childWindow.document.write('</head><body>');
    var content = escapeHtml(document.getElementById('textArea').value).replace(/\n/gi,'<br>');
    content = content.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
    childWindow.document.write(content);
    childWindow.document.write('</body></html>');

    childWindow.document.close();
    childWindow.focus();
    setTimeout(function () {
        childWindow.print();    
        childWindow.close();
    }, 500);
}
</script>
<body>
<textarea id="textArea">FAIL: ABC
FAIL: DE</textarea>
<button onclick="printTextArea()">print TextArea</button>
</body>
</html>

Give this a try: `<span style="background-color: yellow">Text</span>` — Robby Cornelissen, Nov 16 '18 at 05:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you? — lion_bash, Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to the `childWindow`, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it. — lion_bash, Nov 16 '18 at 20:18
Only chrome works, please refer to https://stackoverflow.com/questions/35625178/what-is-the-alternate-for-webkit-print-color-adjust-in-firefox-and-ie — Miller Cy Chan, Nov 17 '18 at 02:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at https://stackoverflow.com/questions/51767557/html2canvas-uncaught-in-promise-undefined/52564598#52564598 — Miller Cy Chan, Nov 17 '18 at 03:03

Javascript print textarea with text highlighted colors

1 Answers1