I have a button in asp.net (c#) that I want after click this button I could print from my html table that is in a update panel ,I only want Print my html table not all page
is there any component?
thanx very much
2 ways to handle it:
CSS to define a print media
Reporting services, hit the data directly from a sproc / direct table
and print a table layout of the data.
Based on OP comment
Straight from W3c:
http://www.w3.org/TR/CSS2/media.html
Read specifically about print media, it means you can define a .css file in your asp.net project with the media type "print":
#media print {
/* style sheet for print goes here */
}
This is nice because you can now define CSS to hide all elements on your screen:
display:none
Except the div / table of your choice:
#myDiv {
display: block;
}
In your asp.net page you have this define:
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="printStyle.css">
This tells your application to use the printStyle.css file when it comes to printing your page.
And once you do try to print the app will use printStyle and all the formatting and styles you have defined.
Here is a good example: https://web.archive.org/web/20200724145536/http://www.4guysfromrolla.com:80/demos/printMediaCss.html
For the second point, if you are running SQL Server, reporting services is free. Of course you will need to set this up and deploy reports. Its a bit out of the scope of this question. If you do have reporting services you may want to open a new topic and ask questions about it.
Otherwise just create a print style css file.
You can probably use the CSS #print Media Type to hide the stuff you don't want to print.
Check out the w3 Schools tutorial for a basic overview.
You can use CSS classes to define media type like #print, #screen and then mark appropriate parts of your webapge with those classes.
For the button to do the print, you will need to add: onClientClick="window.print()" to the button's definition.
Use CSS like this:
#media print
{
printOnly {display:block;}
screenOnly {display:none;}
}
#media screen
{
printOnly {display:none;}
screenOnly {display:block;}
}
Then simply decorate your DIVs or other elements with the classes:
<div class="screenOnly">this will not print but will show on screen</div> or
<div class="printOnly">this will not show on screen but will print</div>
Related
I am trying to print some Cards using web browser, the unfortunate part is that the browser writes a header and footer on my card and gets some space on my card which causes the card to be printed on two pages instead of one page.
How can I remove header and footer on the printing document ?
Thanks in advance .
You could use an alternate stylesheet for printing, and then you define distinct rules for that format:
.my-header { display: none; }
.my-footer { display: none; }
And include the stylesheet with the proper media type, print:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
#media print
{
.noPrint
{
display:none;
}
}
save it in your stylesheet and add this class to elements which you don't want to print.
The browser automaticaly adds a header and footer (with the url and such), you can not switch those off (unfortunately).
The Headers and Footers added by the browser at printing can only be turned off locally by the end user. In IE for instance go to Print > Page Setup and edit the settings under Headers and Footers.
An alternative might be to create a PDF on the fly using something like http://sourceforge.net/projects/itextsharp/
This would allow you to set the page size, insert images, etc. dynamically which might meet your needs.
My site is in asp.net 4 / vb. I'm trying to figure out the best way to make a printer-friendly page that only includes our logo at the top and pertinent information, but omits things like navigational bars and other things that aren't necessary. I have a click-to-print icon and it works fine in all browsers, but it doesn't always print out printer-friendly.
I've read things on this site about making a print.css stylesheet, but I'm unsure as to how I'd code the stylesheet, or if I have to assign div attributes to things I want omitted -- and the posts were older posts. Is it recommended that I omit the navigational links, etc., and if so, what is the best way to go about doing this? Thank you for your help!
You can use CSS #media types.
<p> this should be part of the printed page </p>
<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>
A simplistic style sheet for the above would be:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
In the above, the <div> with the class="noprint" will be displayed on screen as usual, but it will not be printed.
Update:
The "C" in CSS stands for "cascading" - meaning the "last" or closest instruction wins. I can only assume that the <span class="bodycontent"... (being the last or closest) is overriding the div.
ASP.Net Controls have a CssClass property, that's how you'd define it:
<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" CssClass="noprint" Text="foo" />
You can even directly type class="noprint" (instead of using CssClass) in any ASP.Net tag - VS may complain but it should be ok:
<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" class="noprint" Text="foo" />
You don't need to actually add additional elements to wrap stuff that you don't want to show when printing. The best way to do a print stylesheet is to apply a class (maybe call it print_hide) on elements you want to hide when your page is printed. For example:
<div>Text</div>
<img class='print_hide' src='some_huge_image.png'/>
In your print.css stylesheet, you would do:
.print_hide {
display: none;
}
To apply the stylesheet, add this to your head:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
The div would still print, but the image would not.
This is, of course, in addition to whatever other style changes you want, like removing background images, changing colors, fonts, etc.
Adding that class to stuff to hide at print is a relatively minimal change to existing code.
The other option is to create a separate printer friendly version of all of your pages, and if your pages are really complicated, this might be the way to do it. That being said, the benefit of print.css (in addition to being less work) is that users don't need to explicitly select Printer friendly version, of course.
I am trying to print a bill for my client.
I have used window.print() at first, but the problem is I can't set the tear off of the printer, and sometimes the alignments are changed.
So as an alternative I need a solution for printing the bill. Can anybody suggest some?
Can I use applet for this with interfacing the printer. I have gone through most of them & it tells me I should use report, if that is the case which one will be better for me. I use a dot matrix printer for printing job.
I suppose you need to make your pages printer-friendly with print-specific CSS by using css-media-types.
You can include this in your JSP:
<link rel="stylesheet" type="text/css" href="only_4_print.css" media="print" />
notice the media="print" attribute, the CSS won't be applied to the normal page which the User is looking at, but when he tries to print the page the output will have the CSS from this file.
If you want to directly include CSS for print in your JSP it might look something like this:
#media print {
body {font: 12pt georgia,serif;}
h1 {font-size: 18pt;}
h2 {font-size: 15pt; color: #000;}
}
So you need to have two CSS files for the same page:
For normal display on the browser
For printing the page (i.e. the CSS to be applied to the page for printing)
Hope this helps.
Here are some more links which can help you understand this approach better:
An introduction to media specific CSS
How to create a simple print
CSS Media types
A nice article regarding Print CSS
Some modern browsers convert links like
Site
into
Site (http://somesite.com)
as part of the generated PDF.
Is there a way to omit the links from the generated PDF version by pure CSS?
Which CSS classes in the print.css must be defined in order to suppress the link URLs?
Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:
#media print {
##....
a[href]:after {
content:" ("attr(href)")";
color:#868686;
background-color:inherit;
font-style:italic;
size:90%;
}
##....
}
To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):
a[href]:after {
content:"" !important;
}
Your question is not very clear about the scope of your requirement:
Should it be valid just for a website you control and for the users visiting it?
Should it apply to any web page you visit?
If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server
If you want the second, you should google for "user stylesheets" to find links like the following:
Accessibility Features of CSS: User override of styles
Tap the power of Mozilla's user style sheets
How to write a user stylesheet for Safari
Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?
What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print
Newer Firefox
Open devtools with F12.
Go to Inspector tab.
Open Rules subtab.
There will be print media button.
Old firefox
Firefox does not need firebug now.
Run developer toolbar by pressing Shift+F2
Type media emulate print
Type media reset in order to return to standard view.
I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.
Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.
You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.
In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.
Actually, be aware that you might see #media print CSS when you don't expect it.
Like SO uses:
[..]#media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]
...and hence one might expect the CSS panel in Firebug to somehow show:
#media print {
#sidebar, #nav, [..], div.vote {
display: none;
}
}
But instead it shows the CSS as if the #media print is actually active, like:
#sidebar, #nav, [..], div.vote {
display: none;
}
(See also the related issue report: CSS Panel does not have #media UI.)
Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the #media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.
With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.
For example, you can switch an original
<link rel="stylesheet" type="text/css" media="print">
to
<link rel="stylesheet" type="text/css" media="screen">
and the browser will apply it. You'll also have to deactivate the screen-only ones.
Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.
Edit 1 This trick suggests me using javascript to automate this...
(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)
// Save all stylesheet links
allStylesheets = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');
// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}
Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.
As pointed out above, this solution does not work with html code like this, because the styling inside the #media print won't be applied by the browser:
<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
#media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.
What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.
Firefox 68 added a button to "Toggle print media simulation for the page" to the Rules View of the Page Inspector (Bug 1534984):
There's a video of how to use the button in "View #media rules for Print" section of the "Examine and edit CSS" page.