Andrus Andrus - 4 months ago 10
HTML Question

How to print web page as it is shown in browser

Shopping cart is created using BootStrap 3.

It contains html5 markup like

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


In browser window it appears normally.
In Chrome Print Preview shows also urls and printout is ugly.
There are no media specified so output must be same in print as it is in screen.

How to allow users to print shopping cart page as it is shown in screen ?

Answer

Bootstrap adds a lot of print styles:

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

Either remove or override them to get the desired result. e.g. to remove the urls in print view add

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

to your stylesheet.

Comments