How can I print a certain block/part of a web page?
Print option to look like Print Screen functionality.
Use css, with the media = print option.
Like:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
The blocks you don't want printed can set display:none.
See http://www.quackit.com/javascript/javascript_print.cfm
You can use javascript's window.print() to print the page. To restrict the printed content to a specific part of the page, you can create a print stylesheet (see http://www.alistapart.com/articles/goingtoprint/) that hides all but the desired content.
Related
Usecase: Clicking on a link opens an overlay with some content in it. There are many such links on the page, each of which has a corresponding content that loads inside the overlay. User should be able to print only the particular content.
Approach: On clicking the link, I am setting a class called "printer" to the body. Inside print.css, I am hiding all the page content EXCEPT what I see inside the overlay. On closing the overlay, I am removing the class from the body.
Issue: Everything seems to be working fine on FF and IE. On Chrome the print dialog hangs, whereas on Safari, I see a blank page.
Any help would be appreciated to understand what I might be doing wrong OR if any other approach exists.
you can use media type to apply a stylesheet that is used only for print.
<link rel="stylesheet" type="text/css" media="print" href="yourPrint.css"/>
or use #import within your current stylesheet
#media print {
/* style sheet for print goes here */
}
for more info regarding this, check out w3.org http://www.w3.org/TR/CSS2/media.html
and for a less technical albeit less reliable source, http://www.w3schools.com/css/css_mediatypes.asp
Use Print CSS
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
I want to print my table that contains some css styles too. But whenever I run window.print(), the output appears without any applied css to styling headers and footers.
I've used <link rel="stylesheet" href="print.css" type="text/css" media="all" /> in my code. Also I tested it with media="print". But still I have a print preview without any style.
What should I do?
media=print should do.
Make sure you have also checked the "print images and colors" in page setup while seeing the Print Preview.
I have a web application that produce some reports in HTML format. I have different styling options to display these forms. Normally whenever I want to print these pages, I lose all CSS styling features. How can I make a print without any change in appearance?
<link rel="stylesheet" href="./public/css/print.css" type="text/css" media="screen, print" />
As far as I know the print-out should use the same css-styling as the screen unless you specify something else.
Do you specify "media" in the css link?
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You could try to either make sure there is no media specified or to set media="screen, print"...
If you use some JavaScript plugin (like: jQuery-Print) you would lose your appearance in the other way if you use CSS correctly it's impossible to have a change in your print usually?!
if your problem don't solve tell me which language do you use for your application?
the template of my website looks quite good when printed, so i have no separate print css.
However, there is one element at the top which is not needed when printed, and about 2 inches high, so that's kind of a waste at the top of the printed page (which imho distracts the user from the actual content)
So, what i want to accomplish, is 'hide' that element (div) at the top of the page when a user prints the page.
But so far the only solution i've seen is top create a separate css document which then will be used when the user will print my page. That sounds good, but do i now have to maintain 2 different stylesheets with exact the same content (besides that one div)?
Or is it possible to sort of override the standard stylesheet in the print stylesheet? (so i only have to define the exception for that one div in my print stylesheet?)
Hope this explains my problem.....
If you declare your main stylesheet to apply to all media (browsers apply it to all by default):
<link rel="stylesheet" type="text/css" media="all" href="style.css">
Then adding a print stylesheet should not require you to duplicate styles across both CSS files:
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
All you would do is add the print-specific styles to print.css.
But if you want to keep a single stylesheet, and have print-specific overrides within that one stylesheet, you can place the rules in a print media rule:
#media print {
div.do-not-print {
display: none;
}
}
I think this is what you asked vor: overriding the standard css in your print style
Is there a way to run javascript at print time? I know of the IE onprintbefore event, but we use mostly Firefox.
What I'm trying to do is get element positions as they would be in the page rendered for printing so I can insert appropriate page breaks, basically to accomplish what the CSS "page-break-inside: avoid" attribute would do if it were implemented.
It seems that if I could force the javascript to run a separate time for the print rendering, I could do this.
Better use CSS media rule. Provide a print stylesheet.
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Also see http://www.alistapart.com/articles/goingtoprint/.
You may be able to do this as a Firefox extension, otherwise, once you print, the javascript is out of the picture and the page is being sent to the printer.
The other option is to just send the page to the server and have it return a PDF for printing.