example when :
in browser appears a blue rectangle, when try to print the page this blue rectangle is not printed.
printed when :
In chrome (newer versions 17+ I think), this is controlled by a CSS property on the items which developers can add :
source : http://stackoverflow.com/a/9339257
similar - dont waste paper
so here I have a page with a bootstrap print button, where I like when clicked button will not printed
JavaScript:
<div style="margin:0 0;padding:0 0;background:#2ea3fb;">
</div>in browser appears a blue rectangle, when try to print the page this blue rectangle is not printed.
printed when :
JavaScript:
<div style="-webkit-print-color-adjust:exact; margin:0 0;padding:0 0;background:#2ea3fb;">
</div>In chrome (newer versions 17+ I think), this is controlled by a CSS property on the items which developers can add :
JavaScript:
-webkit-print-color-adjust:exact;source : http://stackoverflow.com/a/9339257
JavaScript:
/*http://stackoverflow.com/a/12773239
However in general, print styles are either set using a media tag in your existing stylesheet:*/
@media print{
/*styles here*/
}
/*or linking to a stylesheet specifically for print purposes:*/
<!--These styles styles are only for screens as set by the media value-->
<link rel="stylesheet" href="css/main.css" media="screen">
<!--These styles styles are only for print as set by the media value-->
<link rel="stylesheet" href="css/print.css" media="print">similar - dont waste paper
JavaScript:
/*!
* print.css v1.0.0
* http://printstylesheet.com/
*
* Copyright (c) 2011 David Bushell
* Dual licensed under the BSD or MIT licenses: http://printstylesheet.com/license.txt
* Author: David Bushell
* http://dbushell.com/
*/
/* use a media query to limit the CSS to only print devices, like a printer */
@media only print
{
/* hide every element within the body */
body * { display: none !important; }
/* add a friendy reminder not to waste paper after the body */
body:after { content: "Don't waste paper!"; }
}so here I have a page with a bootstrap print button, where I like when clicked button will not printed
JavaScript:
<style type="text/css">
@media print {
#btn_print {
display: none;
}
}
</style>
<body>
<a id="btn_print" class='btn btn-primary' onclick="window.print();">Print</a>
this is a test
</body>