How to make the printing of pages go out the way it is seen on the screen?

Asked

Viewed 5,830 times

5

I need to make a page that, when the user prints, come out exactly as it is seen on the screen (with the styles), I’m using Bootstrap version 3.1.

Is there any plugin in Javascript that does this? The solution I thought was instead of taking the source code, generate a print of the content, there are other ways to do this?

Example of how the Stackoverflow in print mode (Chrome) Print do SO

javascript html css twitter-bootstrap
  • 1

    Share with us the HTML and CSS snippet you want to print. It’ll be easier to help.

  • @Eliezerbernart is a Gridview I wanted to print the header color exactly as it is viewed in the browser. I found the solution but only for Chrome. I added an answer, a look.

2 answers

6


If you want the print style to be the same for all your page views, you can use the media="all".

<link media="all" rel="stylesheet" type="text/css" href="style.css">

If you are using the style through the tag <style> can do as follows:

@media all {
    \** Seu css **\
}

I hope it helps you!

Update

Twitter Bootstrap brings a preconfiguration of @print media

* {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

So everything you print will be colored, or better, transparent. Change these settings in your bootstrap file, or completely remove and see the results.

Finally, your browser also needs to have color printing options enabled in the Printing properties:

Example in Mozilla Firefox:

Habilitando impressão das cores de fundo

  • As I mentioned in the post I already tried that!

  • @Laerte Update!

0

Searching I found the property -webkit-print-color-adjust which unfortunately only works on Chrome, but my question is focused on a solution that works in the main browsers (I will continue researching, I accept contributions!)

body {
     -webkit-print-color-adjust: exact;
}

According to the definition of MDN: The estate -Webkit-print-color-Adjust is an extension non-standard CSS, which can be used to force the printing of colors and background images in engine-based browsers Webkit, made an example here.

In my project I also used the property !important for the browser to download which color is the priority.

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

Browser other questions tagged javascript html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.