如何打印浏览器中显示的网页

Question

购物车是使用 BootStrap 3 创建的。

它包含类似 html5 的标记

<span class="login-or-register">
        <a class="color-red" href="/store/Account/LogOn">Enter</a>
        or <a href="/store/Account/Register">Register yourself</a>
    </span>

在浏览器窗口中正常显示。 在 Chrome 打印预览中也显示 urls 和打印输出是丑陋的。 没有指定媒体，因此打印中的输出必须与屏幕中的相同。

如何让用户打印屏幕上显示的购物车页面？

Answer 1

Bootstrap 增加了很多打印样式：

@media print {
    *,:after,:before {
        color:#000!important;
        text-shadow:none!important;
        background:0 0!important;
        -webkit-box-shadow:none!important;
        box-shadow:none!important
    }
    a,a:visited {
        text-decoration:underline
    }
    a[href]:after {
        content:" (" attr(href) ")"
    }
    abbr[title]:after {
        content:" (" attr(title) ")"
    }
    a[href^="javascript:"]:after,a[href^="#"]:after {
        content:""
    }
    blockquote,pre {
        border:1px solid #999;
        page-break-inside:avoid
    }
    thead {
        display:table-header-group
    }
    img,tr {
        page-break-inside:avoid
    }
    img {
        max-width:100%!important
    }
    h2,h3,p {
        orphans:3;
        widows:3
    }
    h2,h3 {
        page-break-after:avoid
    }
    select {
        background:#fff!important
    }
    .navbar {
        display:none
    }
    .btn>.caret,.dropup>.btn>.caret {
        border-top-color:#000!important
    }
    .label {
        border:1px solid #000
    }
    .table {
        border-collapse:collapse!important
    }
    .table td,.table th {
        background-color:#fff!important
    }
    .table-bordered td,.table-bordered th {
        border:1px solid #ddd!important
    }
}

删除或覆盖它们以获得所需的结果。例如删除打印视图中的网址添加

@media print{
  a[href]:after {
    content: none !important;
  }
} 

到您的样式表。