font size for window.print

Question

0.00/5 (No votes)

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 17-Dec-15 15:54pm

Member 12115140

Updated 17-Dec-15 15:55pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-12-17T16:27:00

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":

CSS

@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

Posted 17-Dec-15 16:27pm

Sergey Alexandrovich Kryukov

Updated 17-Dec-15 16:28pm

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.

Sergey Alexandrovich Kryukov 18-Dec-15 1:42am

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