Is there a way to switch an HTML page to "print" mode?
When I print, a #media print style-sheet gets applied to the page.
I want to use the page with that print style applied to export to PDF as well. Ideally, if I could get the HTML that gets sent to the printer when I use window.print() I could export it to PDF. I use a server side library and C# to export to PDF.
Any ideas on how I can do this?
Thank you!
As per W3C standars there is no distinctive print mode for web pages except that you can define different CSS rules for #screen and #print media.
If you want to render a page as it is shown in print view somewhere it is show in screen view; use #print CSS for #screen also.
Related
I am searching for MVC view template engines which can be stored in database and used for print previews.
I want to generate generic view, save it into database and then show it as popup (print preview)
But I don't know which view engine is good for this? I am looking noew freemarker. Is it ok?
Or just replace all data objects in C# with database?
If I were you I would create a style sheet especially for printouts.
This can be done by using the #print CSS Media Type:
#media print {
p {
font-size: 20px;
color: red;
}
}
You can change the width, orientation etc of everything in your page, you could even use the display:'none' feature to hide certain parts of the page.
If you build out your screens with razor and this css stylesheet referenced to it you'll be able to use variables with razor and build out the CSS stylesheet to create the view that you want for printing purposes.
Check these resources to get you started:
W3 Schools: CSS print
HowTo from Webcredible
I'm making a pretty simple site using a masterpage and a header and left menu user control. When a user prints the page, I want it to only print the content. Is there a more efficient solution than creating a version of the page that isn't registered to the master page & user controls? Thanks!
CSS media queries with "print" selectors is one common option.
#media print {
.header
{
display:none
}
}
Check out documentation for details w3c, MSDN #media rule, MDN
I am doing asp.net project using C#.I want to display the contents that are being typed in HtmlEditor control onto a A4 size as preview and i also want to save this content to a file(.doc or .txt).
How do i do it??
Please help
You can bind html editor content in variable and then display variable in client side.
server side:
Private static string abc=string.empty;
abc=htmlcontrolname.content;
databind();
on client side:
<%= abc%>
Set page size
There is no way with JavaScript, HTML, CSS currently to set the page size for printing. It is in the CSS spec, but there is very limited support for it.
Save file
There is no IO in JavaScript. The best bet is to send the content to the server and return headers that force a downoad of the file.
I have a label control in a page in asp.net 2.0 and a button Print.
Clicking on print button I need to print the content of the label and I need same for a panel also.
Is it possible to implement this?
If yes then how to implement that?
Please help.
What about Window.Print() method? Because execcommand method will not work other browsers that IE. Use CSS media option to control the print area.
You would need to add some client side javascript to your Print button to execute the brower's print command. The javascript below could be used to print the whole document page and would be a good place to start. Note: It isn't possible to do this without displaying the print dialog unless you use a third party component.
// Print Page
window.print();
If you wanted just to print certain sections of your page you can achieve this two ways. Firstly, you could render the content to be printed into a hidden iframe and then print just that frame. You would do this using the same code as above only from within the frame itself.
Secondly, you could use a media style print style sheet, a CSS that applies only when printing. Inside this sheet you would set the styles you wanted to print as normal and the styles you didn't want to print to "display:none". The link below contains more information on print stylesheets.
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
One more approach could be to open new window and populate the contents of div you wanted to print and have print link/button on that page.
Ex:
var win = window.open(...)
win.document.body.appendChild(document.getElementById('divToPrintId'))
This is how the code will look like this approach is used to print the content/part of the page.
Use below code in button onclick event
ClientScript.RegisterStartupScript(this.GetType(), "PrintOperation", "PrintGridData()", true);
Above link will call function named PrintGridData() which is written in head section as below
<script type="text/javascript">
function PrintGridData()
{
var prtGrid = document.getElementById('<%=GridView.ClientID %>');
prtGrid.border = 0;
var prtwin = window.open('', 'PrintGridViewData', 'left=100,top=100,width=1000,height=1000,tollbar=0,scrollbars=1, status=0,resizable=1');
prtwin.document.write(prtGrid.outerHTML);
prtwin.document.close();
prtwin.focus();
prtwin.print();
prtwin.close();
}
</script>
in this script it will only print div name GridView and other part will not be printed
I am wondering how Internet Explorer, Mozilla Firefox or any other browser generate print preview window of an web page loaded into the browser.
The preview image will have various changes such as banners and adv are removed, will have white background and black text and etc.
We would like implement similar print preview window using C# WebBrowser control and i don't want to use default browser Print preview feature such as ExecWB command or any other.
Please give us some light on this.
Thanks,
Ramanand Bhat.
You could try to alter the styles by accessing and modifying the HTMLDocument LINK elements.
HtmlDocument document = WebBrowser1.Document;
foreach (HtmlElement element in document.GetElementsByTagName("LINK"))
{
string cssMedia = element.GetAttribute("Media");
if (cssMedia == "print")
element.SetAttribute("Media", "screen"); //sets print styles to display normally
else
element.SetAttribute("Media", "hidden"); //hides normal styles
}
This will change your print-styles to display in screen view (i.e. as a normal stylesheet without having to use the print-preview window) and your screen-styles to not be shown (as they don't have a Media type of screen anymore)
This is sample code so doesn't have any error checking. It might also have some syntax errors but it should be a start to achieve your goal.
To print a screen you need to set up a call to window.print() in javascript.
Print screen
It will then use whatever css you have assigned as 'print' in the page to render the page as a preview
As far as I know, the banners, advertisements, et cetera are not removed by the browser during a print preview. CSS governs the appearance when the media is print.