I need to make a page that, when the user prints, quit exactly as it is viewed on the screen (with styles), I'm using Bootstrap version 3.1.
Is there a Javascript plugin that does this? The solution I thought was instead of getting the source code , generating a print of the content, is there other ways to do this?
Example of StackOverflow in print mode ( Chrome )
If you want the print style to be the same for all views on your page, you can use media="all" .
<link media="all" rel="stylesheet" type="text/css" href="style.css">
If you are using the style with the <style> tag, you can do it as follows:
@media all {
\** Seu css **\
}
Hope you can help!
Update
Twitter Bootstrap brings you a pre-configuration of @media print
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
So everything you print will be colorless, or rather transparent . Change these settings in your bootstrap file, or remove them completely and see the results.
Finally, your browser must also have the color printing options enabled in the Print Properties window:
Example in Mozilla Firefox:
Finding the -webkit-print-color-adjust property that unfortunately only works on Chrome , but my question is focused on a solution that works in all major browsers (I'll continue searching, I accept contributions!)
body {
-webkit-print-color-adjust: exact;
}
As defined by MDN : The -webkit-print-color-adjust property is a nonstandard CSS extension , which can be used to force color and image background in browsers based on the WebKit engine, I made an example here .
In my project I also used the !important property for the browser to remove the priority color.
References:
Force Accurate Colors When Printing Web Pages
How to force an element's background to be printed in Webkit
Background color not showing in print preview