Click here to Skip to main content
14,422,439 members
Rate this:
Please Sign up or sign in to vote.
See more:
i use a window.print to print gridview content, but i can't change the font size, here is the code i used:
function printGrid() {
        var gridData = document.getElementById('<%= gvList.ClientID %>');
            var windowUrl = ' ';
            //set print document name for gridview
            var uniqueName = new Date();
            var windowName = 'Print_' + uniqueName.getTime();
            var prtWindow = window.open(windowUrl, windowName, 'left=0,top=0,right=0,bottom=0,width=screen.width,height=screen.height,margin=0,0,0,0');
            prtWindow.document.write('<html><head><font size="5">TITLE</font></head>');
            prtWindow.document.write('<body style="background:none !important; font-size:10pt !important">');
            prtWindow.document.write(gridData.outerHTML);
            prtWindow.document.write('</body></html>');
            prtWindow.document.close();
            prtWindow.focus();
            prtWindow.print();
            prtWindow.close();
        }

anything wrong in this code?
Posted
Updated 17-Dec-15 16:55pm
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

The approach is wrong. There is no such element as font to be used as a child element of head. But even of you created a special "print view" page with properly set fonts and it worked, it still would be wrong.

I'll tell you what is the civilized approach. Ideally, you should not even create a special print representation of a string. Instead, you can use CSS with @media elements:
http://www.w3.org/TR/CSS2/media.html[^],
http://www.w3schools.com/css/css_mediatypes.asp[^],
https://developer.mozilla.org/en-US/docs/CSS/@media[^].

This way, you can provide different CSS style of the same elements for different media, such as "print" and "screen":
@media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }
 }
 @media screen, print {
   body { line-height: 1.2 }
 }


Moreover, even content can be different. There are a lot of elements not suitable for print version. For example, it's useless to "click" on a button or a check box in the printed version. You can hide all unwanted elements from the print version through CSS properties, such as "visibility" and/or "display".

See also my past answer: How to reduce the page size in the code when printing some results through printer ?[^].

—SA
   
v2
Comments
Member 12115140 17-Dec-15 22:55pm
   
Thank you for your answer.
can you show me how to put it in my situation, since i still very new in this
Sergey Alexandrovich Kryukov 17-Dec-15 23:08pm
   
In essence, all you need is shown in this little code sample shown in my answer. I don't understand: what's missing?
Or... did you even use CSS? If not, you should stop HTML development without CSS and use CSS in all cases.

See also
https://developer.mozilla.org/en-US/docs/Web/CSS,
https://en.wikipedia.org/wiki/Cascading_Style_Sheets,
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style,
http://www.w3.org/TR/html401/present/styles.html.

This is all one of the basics. You cannot do real Web development without mastering at least the basics.

So, will you accept the answer formally now?

—SA
Member 12115140 18-Dec-15 0:59am
   
I use your way, but it doesn't work. The font size still didn't change to what i want.
   
How do you know? Did you actually print or used print preview. This is not my way, and it does work, I used it all the time. Make sure that CSS is correctly applied. Say, set color and see if it's changed. If you use print preview, you will see what's going to be on print...
—SA
Member 12115140 18-Dec-15 2:50am
   
I print it out to compare. Below is what I did

<link rel="stylesheet" href="../Style/display.css" type="text/css" />
<style type="text/css">
@media print {
body {
font-size: 10px;
}
}
@media screen {
body {
font-size: 13px;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
</style>

<asp:Content ID="Content2" ContentPlaceHolderID="Main" runat="Server">
<script type="text/javascript">
function printGrid() {
var gridData = document.getElementById('<%= gvList.ClientID %>');
var windowUrl = ' ';
//set print document name for gridview
var uniqueName = new Date();
var windowName = 'Print_' + uniqueName.getTime();
var prtWindow = window.open(windowUrl, windowName, 'left=0,top=0,right=0,bottom=0,width=screen.width,height=screen.height,margin=0,0,0,0');
prtWindow.document.write('<html><head>TITLE</head>');
prtWindow.document.write('<body style="background:none !important" >');
prtWindow.document.write(gridData.outerHTML);
prtWindow.document.write('</body></html>');
prtWindow.document.close();
prtWindow.focus();
prtWindow.print();
prtWindow.close();
}
</script>
Sergey Alexandrovich Kryukov 18-Dec-15 11:09am
   
Don't create a new window! With @media, it's not needed anymore! :-)
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100