Question

我有一个文本区域，该区域显示带有“ FAIL”，“ WARNING”，“ ERROR”之类的关键字的报告。我希望能够使用包括突出显示的颜色来打印此文本区域。

当前，我可以使用以下功能（没有突出显示的颜色）来打印文本区域：

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;
}

此外，当我在print()之前查看html时，我看到正确的类附加到了关键字上：

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

我正在尝试在写入新窗口时添加突出显示类，并使用突出显示的文本进行打印，但这似乎不起作用。我在做错什么吗？

Answer 1

因为弹出窗口不包括在父窗口中定义的css。为了更容易调试，请更好地使用可变内容进行存储。
要使用背景突出显示进行打印，只有 chrome浏览器可以使用。
有关更多信息，请参阅{{3} }

<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>

Background color not showing in print preview

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

1 个答案: