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打印预览中，显示网址和打印输出也很难看。没有指定介质，因此输出必须与打印时的输出相同。

如何允许用户打印购物车页面，因为它显示在屏幕上？

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

到你的样式表。

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

1 个答案: