javascript - jQuery 为表格的每个元素打印一个带有背景颜色的特定 div

Question

我正在开发一个打印按钮来打印一个包含所有内容的 div。

这是我的脚本:

var divToPrint=document.getElementById("print_div");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);

  var css = "table, td, th { \n"+
  "    border: 1px solid black; \n"+
  "    txt-align:justify; \n"+
  "} \n"+
  "th {  \n"+
  "    background-color: #7a7878; \n"+
  "    text-align:center; \n"+
  "}";
   var div = $("<div />", {
    html: '&shy;<style>' + css + '</style>'
    }).appendTo( newWin.document.body);
   newWin.print();
   newWin.close();

当我点击打印按钮时:我几乎看不到这个:

然后在几秒钟内，打印屏幕显示如下:

原来的背景颜色是蓝色而不是深灰色，但即使是深灰色也没有显示在打印屏幕上。

我试过了，是的，表单改变了，但仍然看不到任何背景颜色:

$("#print_div").show();
$("#print_div").show().append("<link rel='stylesheet' href='../css/bootstrap.min.css' media='print' />");
window.print();

大多数类似的回答问题对我来说仍然不起作用。

Answer 1

试试这个

 var css = "@media print {" +
  "table, td, th { \n"+
  "    border: 1px solid black; \n"+
  "    txt-align:justify; \n"+
  "} \n"+
  "th {  \n"+
  "    background-color: #7a7878; \n"+
  "    text-align:center; \n"+
  "}" +
  "}";
var style =$('<style>').html(css);
style.appendTo(newWin.document.head)