I have a web page with 1 Gridview,1 Formview 1 Detailsview and a textBox and a DropDown.
I want to print the web page along with these controls.
I am aware of the javascript print function.But the problem with it is that it is same as File -> print. So it will be done with little or no formatting.Also one cannot control the amount of matter to be printed in one page.It may so happen that a part of
gridview be printed in one page and rest in another.
To tackle these problems I want to create a "printable version" of a web page.It will be same as the web page with the exclusion of background color of page, gridview rows etc.
Users nowadays have come to expect such a page after seeing the likes of it in gmail,hotmail and other email providers.
Pls guide me in this regard with detailed advice, code including stylesheets(if required).
It says to put the tag <link rel=alternate media=print href="printversion.doc">
and then use File -> print.
I need to tell u the following things in this regard.
1) I don't want to use File -> print but have a button on clicking which the "printable version" should open and within that another print button which will print that version.
2) The article says alternate document has to be created either in WORD or PDF or some other.But then I have to check whether these applications are installed in the Client's Computer.
How do I check that?
3) It does not say anything as to whether background colors of page gridview will come in the printable version. If the page has flash banners then I would assume that it won't come bec' word or pdf doesn't flash banners.
4) Nothing is mentioned about controlling the amount of matter printed on a page. For example it should not happen that a part of a gridview is printed on one page and the other part in other page.
Thus give me some other links or code if u have it.
Sorry can't help any further. I just provided the link to help you out. It is your responsibility to go from there. As for the File -> Print menu option, ALL printing in a web page utilizes the SAME print functionality period, whether from the menu option
or a print button -- window.print(), unless you use a 3rd party reporting component such as Crystal Reports.
Hello sunny74 In this scenario, I would like to suggest you open a new window with the print version, and then call window.print() to print it: Similar question: http://forums.asp.net/p/1356509/2795024.aspx#2795024 Thanks.
Some of the things are not mentioned in the link u have given:
1)It talks about printing contents of a textbox.In my case it is a whole page with all the controls.Whether printable version should be a HTML page or .doc or PDF page. If it is a HTML one then while printing does it print only the matter or the html <>tags
also.
2)How do I ensure that the printable version has only the contents of those controls that it can print entirely? It should not happen that half of the contents of any control is printed on one page and other half in another page.
3)How do I take care of banners,background color of pages, controls etc?
Hi. I got the same scenario in one my application I involved. It could be helpful to solve this problem..
The requirement was- I have a page with three gridview, some entry fields, some text etc., While user clicks print, there should a print preview screen open with two button – Print and cancel. The popup screen should have some text at top, after a grid,
and some security confidential information etc,.
Declared a button like this
<input type="button" id="btnPrint" value="Print" style="width:100px" onclick="Print()" />
The javascript code is
printWindow.document.write(document.getElementById('divUserList').innerHTML); // Get gridview HTML code and writing to the window, here divUserList is div control which contains the gridview we need.
var sUserCommentsHTML = document.getElementById('divUserList').innerHTML // Get another one gridview
sUserCommentsHTML = sUserCommentsHTML.split("class=GridImage").join(""); // removing the class, here I dont need any style
printWindow.document.write(sUserCommentsHTML); // Writing to the document
Here one of a gridview declaration could be like ..
<div id="divUserList">
<%--Inside you can declare any control. When you get innerHTML of divUserList, all the controls you are refering to print --%>
<asp:GridView id="GridViewUser" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CellSpacing="1" GridLines="None" DataKeyNames="Id"
BackColor="White" CellPadding="3" BorderWidth="2px" BorderStyle="None" BorderColor="White"
>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black"></FooterStyle>
<Columns>
All Columns
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" Height="20px"></RowStyle>
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF"></HeaderStyle>
<AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
</asp:GridView>
</div>
In this way you can write whatever content u need to print on the print from the actual screen. As no postback, it could be fast also..
<script type="text/javascript">
<!--
function printTextBox(elementId)
{
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var windowName = 'Print' + new Date().getTime();
var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
sunny74
Participant
1494 Points
782 Posts
creating printable version of web page
Apr 27, 2009 02:07 PM|LINK
Dear All,
I have a web page with 1 Gridview,1 Formview 1 Detailsview and a textBox and a DropDown.
I want to print the web page along with these controls.
I am aware of the javascript print function.But the problem with it is that it is same as File -> print. So it will be done with little or no formatting.Also one cannot control the amount of matter to be printed in one page.It may so happen that a part of gridview be printed in one page and rest in another.
To tackle these problems I want to create a "printable version" of a web page.It will be same as the web page with the exclusion of background color of page, gridview rows etc.
Users nowadays have come to expect such a page after seeing the likes of it in gmail,hotmail and other email providers.
Pls guide me in this regard with detailed advice, code including stylesheets(if required).
Thanks for your responses.
PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: creating printable version of web page
Apr 27, 2009 02:32 PM|LINK
Check here: http://www.dynamicdrive.com/dynamicindex9/printstyle.htm
NC...
sunny74
Participant
1494 Points
782 Posts
Re: creating printable version of web page
Apr 28, 2009 05:17 AM|LINK
Hi NC,
Thanks for ur reply.
I went through the link u sent.
It says to put the tag <link rel=alternate media=print href="printversion.doc">
and then use File -> print.
I need to tell u the following things in this regard.
1) I don't want to use File -> print but have a button on clicking which the "printable version" should open and within that another print button which will print that version.
2) The article says alternate document has to be created either in WORD or PDF or some other.But then I have to check whether these applications are installed in the Client's Computer.
How do I check that?
3) It does not say anything as to whether background colors of page gridview will come in the printable version. If the page has flash banners then I would assume that it won't come bec' word or pdf doesn't flash banners.
4) Nothing is mentioned about controlling the amount of matter printed on a page. For example it should not happen that a part of a gridview is printed on one page and the other part in other page.
Thus give me some other links or code if u have it.
This doesn't serve my purpose.
PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: creating printable version of web page
Apr 28, 2009 11:26 AM|LINK
Sorry can't help any further. I just provided the link to help you out. It is your responsibility to go from there. As for the File -> Print menu option, ALL printing in a web page utilizes the SAME print functionality period, whether from the menu option or a print button -- window.print(), unless you use a 3rd party reporting component such as Crystal Reports.
NC...
Lance Zhang ...
All-Star
33091 Points
2361 Posts
Re: creating printable version of web page
Apr 30, 2009 08:01 AM|LINK
Hello sunny74
In this scenario, I would like to suggest you open a new window with the print version, and then call window.print() to print it:
Similar question:
http://forums.asp.net/p/1356509/2795024.aspx#2795024
Thanks.
sunny74
Participant
1494 Points
782 Posts
Re: creating printable version of web page
May 02, 2009 05:37 AM|LINK
Hi Lance,
Thanks for your reply.
Some of the things are not mentioned in the link u have given:
1)It talks about printing contents of a textbox.In my case it is a whole page with all the controls.Whether printable version should be a HTML page or .doc or PDF page. If it is a HTML one then while printing does it print only the matter or the html <>tags also.
2)How do I ensure that the printable version has only the contents of those controls that it can print entirely? It should not happen that half of the contents of any control is printed on one page and other half in another page.
3)How do I take care of banners,background color of pages, controls etc?
PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.
ahsanm.m
Contributor
5254 Points
781 Posts
Re: creating printable version of web page
May 02, 2009 04:05 PM|LINK
This link may help you.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=92
DotnetBoss | asp.net boss
Thirumalai_p...
Participant
1799 Points
291 Posts
Re: creating printable version of web page
May 02, 2009 05:15 PM|LINK
Hi. I got the same scenario in one my application I involved. It could be helpful to solve this problem..
The requirement was- I have a page with three gridview, some entry fields, some text etc., While user clicks print, there should a print preview screen open with two button – Print and cancel. The popup screen should have some text at top, after a grid, and some security confidential information etc,.
Declared a button like this
<input type="button" id="btnPrint" value="Print" style="width:100px" onclick="Print()" />
The javascript code is
<script type="text/javascript" language="javascript">
function Print()
{
printWindow= window.open ("", "mywindow", "location=1,status=1,scrollbars=1,width=600,height=500");
printWindow.document.write('<div style="width:100%;text-align:right">');
printWindow.document.write('<input type="button" id="btnPrint" value="Print" style="width:100px" onclick="window.print()" />');
printWindow.document.write('<input type="button" id="btnCancel" value="Cancel" style="width:100px" onclick="window.close()" />');
printWindow.document.write('</div>');
printWindow.document.write(document.getElementById('divUserList').innerHTML); // Get gridview HTML code and writing to the window, here divUserList is div control which contains the gridview we need.
var sUserCommentsHTML = document.getElementById('divUserList').innerHTML // Get another one gridview
sUserCommentsHTML = sUserCommentsHTML.split("class=GridImage").join(""); // removing the class, here I dont need any style
printWindow.document.write(sUserCommentsHTML); // Writing to the document
printWindow.document.close();
printWindow.focus();
}
</script>
Here one of a gridview declaration could be like ..
<div id="divUserList">
<%--Inside you can declare any control. When you get innerHTML of divUserList, all the controls you are refering to print --%>
<asp:GridView id="GridViewUser" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CellSpacing="1" GridLines="None" DataKeyNames="Id"
BackColor="White" CellPadding="3" BorderWidth="2px" BorderStyle="None" BorderColor="White"
>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black"></FooterStyle>
<Columns>
All Columns
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" Height="20px"></RowStyle>
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF"></HeaderStyle>
<AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
</asp:GridView>
</div>
In this way you can write whatever content u need to print on the print from the actual screen. As no postback, it could be fast also..
Thanks, Thirumalai M
java script
Thirumalai Muniswamy My Blog
Mark as Answer if this reply helps you.
anup1252000
Contributor
3834 Points
698 Posts
Re: creating printable version of web page
May 03, 2009 08:21 AM|LINK
try this
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" onclick="printTextBox('<%= TextBox1.ClientID %>');" value="Print TextBox" />
</form>
<script type="text/javascript">
<!--
function printTextBox(elementId)
{
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var windowName = 'Print' + new Date().getTime();
var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
printWindow.document.write(printContent.value);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
// -->
</script>
Anup Hosur
HP
http://anup-anuphosur.blogspot.com/
anup1252000
Contributor
3834 Points
698 Posts
Re: creating printable version of web page
May 03, 2009 08:22 AM|LINK
or else u can also specify in body<body onload="window.print"></body>
Anup Hosur
HP
http://anup-anuphosur.blogspot.com/