如何准确打印页面在屏幕上的外观？答案

【问题标题】：How to print page exactly how it looks on screen?如何准确打印页面在屏幕上的外观？
【发布时间】：2021-02-03 16:30:17
【问题描述】：

我正在使用自定义 CSS 通过 ASP.NET Web 窗体创建调度页面。我添加了一个打印按钮，并希望它能够准确地打印页面在屏幕上的外观，但是当我去打印时它似乎忽略了我所有的 CSS。我该如何解决这个问题？

我的日程安排：

目前的打印方式：

我的 CSS：

.board-layout {
    background-color: #173F5F;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    display: grid;
    grid-gap: 6px;
    padding: 6px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    overflow: auto;
    box-shadow: 0 3px 0 rgba(9,30,66,.25);
    border: 3px solid black;
    transition: all .2s ease-in-out;
}

.board-layout:hover {
    /*transform: scale(1.005);*/
    border: 3px solid lightgrey;
}

.list-layout {
    display: grid;
    grid-gap: 10px;
}

.board-text {
    font-size: 14px;
    padding: 6px;
    color: #EEFBFB;
}

.board-lists {
    display: grid;
    grid-auto-columns: 13.9%;
    grid-auto-flow: column;
    grid-gap: 6px;
    height: auto;
}
.crew-board-lists {
    display: grid;
    grid-auto-columns: 49.72%;
    grid-auto-flow: column;
    grid-gap: 6px;
    height: auto;
    font-weight: bold;
}

.Job-lists {
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    grid-gap: 10px;
    height: auto;
}

.board-list {
    background-color: rgb(235, 236, 240);
    border-radius: 4px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    min-height: 40px;
    height: max-content;
    padding: 6px;
    cursor: pointer;
}

.day-board-list {
    background-color: #EBEBEB;
    border-radius: 4px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    min-height: 40px;
    height: max-content;
    padding: 6px;
    cursor: pointer;
}

.day-board-list:hover, .crew-board-list:hover, .equipment-board-list:hover, .card:hover, .cardEmployee:hover, .cardEquipment:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transform: scale(1.01);
    border: 1px solid white;
}

.day-board-list, .crew-board-list, .equipment-board-list, .card, .cardEmployee, .cardEquipment {
    transition: all .1s ease-in-out;
}

.DragHoverCustom {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transform: scale(1.01);
    border: 1px solid white;
}

.date-list {
    background-color: #EBEBEB;
    border-radius: 4px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    height: auto;
    padding: 4px;
    text-align: center;
}

.crew-board-list {
    background-color: #3C99DC;
    border-radius: 4px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    height: max-content;
    min-height: 34px;
    padding: 6px;
    cursor: pointer;
}
.equipment-board-list {
    background-color: #70D1D0;
    border-radius: 4px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    height: max-content;
    min-height: 34px;
    padding: 6px;
    cursor: pointer;
}

.list-title {
    font-size: 15px;
    font-weight: bold;
}
.schedule-dates {
    font-size: 18px;
    font-weight: bold;
}

.card {
    background-color: #EEFBFB;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(9,30,66,.25);
    padding: 2px;
    cursor: pointer;
}

.cardEquipment {
    background-color: #70D1D0;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(9,30,66,.25);
    padding: 2px;
    cursor: pointer;
}

.cardEmployee {
    background-color: #3C99DC;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(9,30,66,.25);
    padding: 2px;
    cursor: pointer;
}

.tabs {
    width: 100%;
    height: 800px;
    margin: 0 auto;
}

/* tab list item */
.tabs .tabs-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.tabs .tabs-list li {
    width: 30%;
    float: left;
    margin: 0px;
    margin-right: 2px;
    padding: 10px 5px;
    text-align: center;
    background-color: #173F5F;
    border-radius: 4px;
}

.tabs .tabs-list li:hover {
    cursor: pointer;
}

.tabs .tabs-list li a {
    text-decoration: none;
    color: white;
}

/* Tab content section */
.tabs .tab {
    display: none;
    width: 96%;
    min-height: 200px;
    height: auto;
    border-radius: 4px;
    padding: 20px 15px;
    background-color: #EBEBEB;
    clear: both;
}

.tabs .tab h3 {
    border-bottom: 3px solid cornflowerblue;
    letter-spacing: 1px;
    font-weight: normal;
    padding: 5px;
}

.tabs .tab p {
    line-height: 20px;
    letter-spacing: 1px;
}

/* When active state */
.active {
    display: block !important;
}

.tabs .tabs-list li.active {
    background-color: #EBEBEB !important;
    color: black !important;
}

.active a {
    color: black !important;
}

/* media query */
@media screen and (max-width:360px) {
    .tabs {
        margin: 0;
        width: 96%;
    }

    .tabs .tabs-list li {
        width: 80px;
    }
}

/* Context menu */
.context-menu {
    display: none;
    position: absolute;
    border: 1px solid black;
    border-radius: 3px;
    width: 200px;
    background: white;
    box-shadow: 10px 10px 10px black;
    z-index: 10000;
}

.context-menu ul {
    list-style: none;
    padding: 2px;
}

.context-menu ul li {
    padding: 5px 2px;
    margin-bottom: 3px;
    color: white;
    font-weight: bold;
    background-color: darkturquoise;
}

.context-menu ul li:hover {
    cursor: pointer;
    background-color: #7fffd4;
}

我页面上的普通 CSS 链接：

<link rel="stylesheet" href="Content/CustomCSS.css" type="text/css">

【问题讨论】：

唯一的方法可能是创建一个名为print.css 的新css 文件，该文件会在打印时自动调用。很烂，但可能是唯一的方法。我已经做到了。（见下文。）
只有当您告诉打印机这样做时才会打印背景颜色......在用户端。您可能还需要横向打印。设置一个 print.css 样式表并通过@media print{@page {size: landscape} /*selector and style here */} 调用它
输出永远不会与您在屏幕上看到的完全一样，因为屏幕使用与打印机不同的技术来显示信息，并且它们之间无法达到精确的 1:1。

标签： css asp.net printing

【解决方案1】：

刚刚查了一下，我实际做的是添加媒体样式：

@media print {
    *                           {   color:#333; }
    html                        {   height:auto; }
    h1:before                   {   content:"Site Name - "; }
    .pageTitle                  {   font-size:20pt; }
    #selectedTitleWrapper       {   text-align: left !important; }
    .mainContentColumn          {   margin-bottom: 0; }
}

这些样式用于打印并覆盖现有样式。尝试一些。例如，删除顶行的滚动条：

.container { overflow-x: hidden; } /* for example. */

【讨论】：

【解决方案2】：

我找到了一个名为html2canvas 的解决方案，它可以将任何元素或整个页面重建为图像。我的 JavaScript 代码最终看起来像这样，并生成了我的日程安排的完美副本！

function customPrint() {
    document.getElementById('scheduleArea').style.maxHeight = 'max-content';
    html2canvas(document.querySelector("#scheduleArea")).then(canvas => {
        document.body.appendChild(canvas)
    }).then(() => {
        let canvas = document.querySelector('canvas');
        canvas.style.display = 'none';
        let image = canvas.toDataURL("image/png");
        let tWindow = window.open("");
        $(tWindow.document.body)
            .html("<img id='Image' src=" + image + " style='width:100%; height:auto;'></img>")
            .ready(function () {
                tWindow.focus();
                tWindow.print();
            });
        document.getElementById('scheduleArea').style.maxHeight = '800px';
        document.body.removeChild(canvas);
    });
};

【讨论】：