Here's a fiddle illustrating the general concept, try printing it.

Question

我正在使用JavaScript函数调用弹出窗口来打印我的标签，该函数包含CSS链接。问题是，当我预览时，CSS似乎不会影响打印页面，我不知道哪个部分出错了。有人可以给我建议吗？

JavaScript代码：

function ConfirmButton() {
    if (true) {
        var prtContent = document.getElementById("<%=printing.ClientID %>");
        var WinPrint1 = window.open('', '', 'scrollbars=yes,letf=0,top=0,width=400,height=430');
        WinPrint1.document.writeln('<body><link href="CSS/bootstrap.min.css"rel="stylesheet" /><link href="Printing.css"rel="stylesheet" media ="print"/>');
        WinPrint1.document.write(prtContent.innerHTML);
        WinPrint1.document.writeln('</body></HTML>');
        WinPrint1.document.title = "Test Printing";
        WinPrint1.document.close();
        WinPrint1.focus();
        WinPrint1.print();
        return true;
    }
    else {
        return false;
    }
}

CSS页面名称“Printing.css”：

body {
    background-color: red;
}

Answer 1

打印时不会渲染背景颜色......这是一件好事。打印页面有自己的介质，有自己的背景颜色，不像屏幕更动态和多变量。能够在屏幕上绘制画布比在页面上更有意义。

如果出于某种原因，你真的想要用红色打印一个部分，你可以将整个内容包装在一个容器中，并像这样做一些CSS魔法：

<section class="page-container">
  <div>All my content...</div>
  <div>All my content...</div>
  <div>All my content...</div>
</section>

.page-container {
  position: relative;
  z-index: 1;
  height: 100vh;
}
.page-container:after {
  content: url(data:image/png;base64,...LONG BASE64 STRING...==);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-container > div {
  position: relative;
  z-index: 2;
}

Here's a fiddle illustrating the general concept, try printing it.

Web应用程序aspx css打印问题

1 个答案:

Here's a fiddle illustrating the general concept, try printing it.