How to Print a Web Page with All Its CSS Style Attached to The Page

How to print web page with a different stylesheet other than print.css

This is just an idea, but have you tried loading the basic-print.css file with JavaScript?

I'm thinking of something like (using the jQuery library):

$(document).ready(function(){
    $('#print-basic-button').click(function(){
       $('link').first().removeAttr('href').attr('href', 'basic-print.css');
    });
});

How to print webpages with iframe and css

You are calling frame.print() before the styles have loaded.

"The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content."

Try this:

head.lastChild.addEventListener("load", function (event) {
    // In IE, you have to focus() the Iframe prior to printing
    // or else the top-level page will print instead
    frame.focus();
    frame.print();
}, 0);

References

• https://github.com/abbotto/teleprint/blob/master/src/components/print.js
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Stylesheet_load_events

Formatting a web page for printing

I have use a jquery plugin long time ago the name is PrintElement, with this plugin you can print whatever all the information contained inside an element in the DOM.

so my best bet here will be to format the HTML and target to that specific tag inside your page, in the case you mentioned earlier it could be the scenario when you have a header, the content and a footer, so use the printEment plugin and target to the content object, it could be a div for example.

<header></header>
<div class="content"></div>
<footer></footer>

so you can use the plugin as follows:

$('Selector').printElement();

and on top of that if you add the media css files the you'll have a nice strategy for print.

How to have multiple css print layouts on a single page application?

You can use CSS media queries to direct CSS rules at print time as described in this answer: How do I hide an element when printing a web page?.

You can then set different classes on some high level part object before printing to control which CSS rules apply and thus what gets printed in a given operation.

You can also have a whole stylesheet withe the media type set to print so it applies only when printing.

Or, depending upon the specific situation, you can open a new window, put the content to be printed in that new window and print that window. Usually, it's better to avoid opening a new window if you don't have to.

how to print another page(or file) when user click browser's print button?

You cannot redirect or redefine the browser's print button. That would be a security hole, if you could.

You can use print CSS (the best way) or you can offer your own print button and hope that the user decides to use it (she won't always).

---

Related Topics