how to make printable version of a webpage?

问题

I would like to make a printable version of my web page. I have already tried using CSS to make a separate stylesheet for the page but it is not working properly.(i.e. it will not get rid of margin at the top also the menu bar background will not go away.) the page consists of hundreds of tables and when i do a print preview they also get split between pages sometimes.

these tables are generated dynamically according to users choices in checkboxes is it possible to add a printable link which will take the content from the current page and put it into a page where it can be mad more printer friendly?

回答1:

There is no need of two different pages. You should create a different CSS sheet. After you copy the existing one, just set everything in black/white (or a few colours if you really need them), remove any menus and elements you don't need by putting display: none; in their CSS declaration, and to get rid of the unwanted margins. You should just put a margin: 0 or margin-top: 0 declaration here and there. If you don't show your HTML and CSS code is difficult to be more specific.

回答2:

You can make printer friendly version of your page with @media print

@media print {
        your styles here
}

For example in Foundation they have the basic rules to which you can add anything of your own:

@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
    -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
    p a, p a:visited { color: #444 !important; text-decoration: underline; }
    p a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
    .hide-on-print { display: none !important; }
    .print-only { display: block !important; }
}

回答3:

Use CSS with @media rules. Define your styles for displaying on the screen with @media screen and @media print for print-view. Control page breaks with page-break-* attributes.

@media screen {
    body {
        background-image: url(/images/background.png);
    }
}
@media print {
    body {
        background-image: none;
    }
    tr {
        page-break-inside: avoid;
    }
}

回答4:

The easiest way is to make another stylesheet for the print version and add the attribute media="print" to the <link/> for it.

来源：https://stackoverflow.com/questions/8994403/how-to-make-printable-version-of-a-webpage

标签

html

css

printing