Javascript打印文本区域，文本突出显示颜色

Question

I have a textarea that displays a report with keywords like "FAIL", "WARNING", "ERROR". 我有一个textarea，它显示带有“ 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: 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: 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: 另外，当我在print()之前查看html时，我看到正确的类附加到了关键字上：

<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? 我做错什么了吗？

Answer 1

Because the popup window does not include the css defined in the parent window. 因为弹出窗口不包括在父窗口中定义的css。 For easier to debug, better use variable content to store. 为了便于调试，最好使用可变内容进行存储。
To print it with background highlight, only chrome browser works. 要使用背景突出显示进行打印，只能使用chrome浏览器 。
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>

Javascript打印文本区域，文本突出显示颜色

问题描述

1 个解决方案

解决方案1
0 2018-11-16 03:38:04

Javascript打印文本区域，文本突出显示颜色

问题描述

1 个解决方案

解决方案1 0 2018-11-16 03:38:04

解决方案1
0 2018-11-16 03:38:04