JS web page printing Solution

These days are so busy that companies always work overtime when there are too many projects, and many of these projects use printing, so I learned how to print JavaScript for a while.

In fact, we only used simple functions. Now we need to have a deep understanding to find that the web page printing of IE is so powerful.

Below is the JS printing method I extracted online.

Javascript web page Printing

General printing (full page printing) printing part of the content in the web page (custom) Printing remove/Add a header and footer using external controls/methods to achieve multi-function printing print background

The above is code control

Set "page settings" to set printing parameters (Windows system graphic version)

I. general printing (full page printing)
This can be used directly.

 

Reference: window. Print ();

Ii. print some content in the webpage (custom)

Three methods
1. Use CSS to control

 

Reference: @ Media Print
. A {display: block}
. B {display: hidden}
Set part of the class you don't want to print to B.
First, add the following content to the webpage:

Reference: <Object ID = "webbrowser" Height = "0" width = "0" classid = "CLSID: 8856f961-340a-11d0-a96b-00c04fd705a2"
Viewastext>
</Object>
Then you can add the function buttons in sequence:

Reference: <input type = "button" value = "print"> <input type = "button" value = "print">
<Input type = "button" value = "page settings">
<Input type = "button" value = "print preview"> <input type = "button" value = "Close Window">
Put the two items in <center class = noprint> </center> and the buttons will not be printed. Of course we need to define noprint:
<Style media = "print">. noprint {display: None} </style> you only need to set the CSS Of the things you don't want to print to noprint.
Now we have implemented basic web printing. Note the following:
A. You must set ActiveX controls that are not marked as secure in the security settings of Internet Options of IE to prompt or enable them. Otherwise, an error will be reported, resulting in unavailability.
B. if you edit the page in the vs.net editing environment, it automatically adds additional parameters to the object. With these parameters, printing will fail, so remember to delete them when saving them.

2. Use JavaScript to print content in a fixed tag
A. Add JavaScript to the Code header of the page:

Reference: <script language = JavaScript>
Function doprint (){
Bdhtml###doc ument. Body. innerhtml;
Sprnstr = "<! -- Startprint --> ";
Eprnstr = "<! -- Endprint --> ";
Prnhtml = bdhtml. substr (bdhtml. indexof (sprnstr) + 17 );
Prnhtml = prnhtml. substring (0, prnhtml. indexof (eprnstr ));
Too many Doc ument. Body. innerhtml = prnhtml;
Window. Print ();
}
</SCRIPT>

2. Add <! -- Startprint --> and <! -- Endprint --> ID.

That is, append it to the HTML corresponding to the text to be printed and saved by the user. At the same time, if you use a thief program to obtain remote data and print it, you can place the data within the defined tag.

3. The part of the captured content has been completed. Add a "print" link:

XML/html code
<A href = "javascript:;" onclick = "doprint ()"> Print </a>

Reference:
<Script language = "JavaScript">
VaR hkey_root, hkey_path, hkey_key
Hkey_root = "HKEY_CURRENT_USER"
Hkey_path = "\ Software \ Microsoft \ Internet Explorer \ pagesetup \\"
// Set the page header and footer to be empty.
Function pagesetup_null (){
Try {
VaR regwsh = new activexobject ("wscript. Shell ")
Hkey_key = "Header"
Regwsh. regwrite (hkey_root + hkey_path + hkey_key ,"")
Hkey_key = "footer"
Regwsh. regwrite (hkey_root + hkey_path + hkey_key ,"")
} Catch (e ){}
}
// Set the page header and footer to the default value.
Function pagesetup_default (){
Try {
VaR regwsh = new activexobject ("wscript. Shell ")
Hkey_key = "Header"
Regwsh. regwrite (hkey_root + hkey_path + hkey_key, "& W & B page number, & P/& P") hkey_key = "footer"
Regwsh. regwrite (hkey_root + hkey_path + hkey_key, "& U & B & D ")
} Catch (e ){}
}
</SCRIPT>
<Input type = "button" value = "Clear page number" onclick = pagesetup_null ()>
<Input type = "button" value = "Restore page number" onclick = pagesetup_default ()>

Copy the file and check the effect.

(4) use external controls/methods to implement multi-function Printing

1. iewebbrowser component

Introduction
Http://support.microsoft.com/default.aspx? SCID = kb % 3ben-us % 3bq267240 # top

Http://support.microsoft.com/kb/q247671/#appliesto

Code

Reference: <object classid = CLSID: 8856f961-340a-11d0-a96b-00c04fd705a2 Height = 0 id = webbrowser width = 0> </Object>

<Input name = button onclick = Document. All. webbrowser. execwb (1,1) type = button value = open>

<Input name = button onclick = Document. All. webbrowser. execwb (2, 1) type = button value = close all>

<Input name = button onclick = Document. All. webbrowser. execwb (4,1) type = button value = Save As>

<Input name = button onclick = Document. All. webbrowser. execwb (6, 1) type = button value = print>

<Input name = button onclick = Document. All. webbrowser. execwb (6, 6) type = button value = print directly>

<Input name = button onclick = Document. All. webbrowser. execwb (7,1) type = button value = print preview>

<Input name = button onclick = Document. All. webbrowser. execwb (8, 1) type = button value = page Settings>

<Input name = button onclick = Document. All. webbrowser. execwb (10, 1) type = button value = attribute>

<Input name = button onclick = Document. All. webbrowser. execwb (17,1) type = button value = select all>

<Input name = button onclick = Document. All. webbrowser. execwb (22, 1) type = button value = Refresh>

<Input name = button onclick = Document. All. webbrowser. execwb (45, 1) type = button value = close>

2. Use the scriptx. Cab Control

1. Download The scriptx. Cab Control

Official http://www.meadroid.com/scriptx/index.asp

2. Use the object element to modify the value of codebase and classid.

The scriptx. Cab control is called here.

Code

Reference:
<Object ID = "Factory" style = "display: none" codebase = "$ {rooturl} JS/smsx. cab # vversion = 6, 3, 435,20 "classid =" CLSID: 1663ed61-23eb-11d2-b92f-008048fdd814 "viewastext> </Object>

This code is used to load the cab file. The clsid and codebase must correspond to the information in the downloaded cab. Otherwise, the component will be loaded incorrectly, as long as you use WinRAR to open the downloaded cab file and find that the extension is. INF file, and then open it, you can see.

3. Call the control script

Print. JS File
Code

 

Reference:

Function setprintbase (headertext, footertext, rooturl ){


// -- Advanced features, which has never been used and is awaiting confirmation.

// Factory. Printing. setmarginmeasure (2); // measure margins in inches

// Factory. setpagerange (false, 1, 3); // need pages from 1 to 3

// Factory. Printing. Printer = "HP Deskjet 870c ";

// Factory. Printing. Copies = 2;

// Factory. Printing. collate = true;

// Factory. Printing. papersize = "A4 ";

// Factory. Printing. papersource = "manual feed"

VaR header = (headertext = NULL | headertext = "")? 'Default head': headertext;

VaR footer = (footertext = NULL | footertext = "")? 'Character page': footertext;

Factory. Printing. header = "& B" + header + "& B ";

Factory. Printing. footer = "& B" + footer;

Factory. Printing. Portrait = true;

Factory. Printing. leftmargin = 10.00;

Factory. Printing. topmargin = 10.00;

Factory. Printing. rightmargin = 10.00;

Factory. Printing. bottommargin = 10.00;

}

Example

 

Reference:

<HTML>
<Head>
<Meta http-equiv = "imagetoolbar" C>
<Script language = "JavaScript" src = "print. js"> </SCRIPT>
<Style media = "print">
. Noprint {display: none ;}
</Style>
<Title> Print test </title>
</Head>
<Object ID = "Factory" style = "display: none" codebase = "smsx. Cab # vversion = 6, 3, 435,20" classid = "CLSID: Hangzhou" viewastext> </Object>


<SCRIPT defer>
Function window. onload (){
Setprintbase ('header ', 'footer ');
}
</SCRIPT>
<Body topmargin = "0" leftmargin = "0" rightmargin = "0" bottommargin = "0" marginwidth = "0" marginheight = "0">

<Center class = "noprint">
<Input type = button value = "print">
<Input type = button value = "page settings">
<Input type = button value = "print preview">
<Input type = "button" value = "close">
</Center>
<Center>
<Table width = "100%" border = "0" cellpadding = "0" cellspacing = "0">
<Tr> <TD align = "center"> <B> content </B> </TD> </tr>
</Table>
</Center>
</Body>
</Html>

 

 

(5) print the background
By default, when you use IE to print a webpage, the webpage background is not printed. To print the webpage background, use the following method:
1. Start IE browser.
2. Select Internet options from the Tools menu to open the Internet Options dialog box.
3. Open the Advanced tab and select the print background color and image check box in the print selection area.
4. Click OK to close the dialog box.

(6) how to print web pages with IE

 

Internet Explorer (IE) 5.0 and later versions provide powerful print and print preview functions. This article describes how to use IE to print web pages. (Who? Who? Who is throwing tomatoes? Below is a piece of Buzz: Do you still need to talk about it ?!) Yes, it's too easy to print web pages in IE. Click "print" on the toolbar to print the current webpage. As shown in:

However, what is the effect you have achieved? I can't say that. What I want to talk about today is some printing settings. If you set these parameters, you will find that the print function of IE can catch up with word. In the future, when you print a webpage, you will be able to print it as soon as you want. Well, let's just talk about it. Now let's take a look at how to set the print parameters for IE.
Let's take the student list to be printed ("Student Status Management System MX" query result webpage) as an example to explain how to set these print parameters:

If we click the "print" button in the toolbar or click "print" in the "file" menu to print the webpage, a lot of unnecessary information will be printed. Therefore, we should first use the "print preview" function added by ie5 to view the actual printing effect of the current webpage before printing. As shown in:

In the "print preview" dialog box shown in, we can see that the information we do not need, such as the webpage title, webpage URL address, and printing date, is also printed. The page number is in the upper right corner. Can I move it to another location (such as the lower right corner?

 

Can we print the webpage according to the style we want? Of course. Everything is in "page settings.

In the displayed "page settings" dialog box, all the secrets are here!

Originally, ie automatically added unnecessary print information to the header and footer. If we don't want any headers and footers, just delete them. :-) Most of the time I do this. But what if you want to customize the header and footer? What exactly do the "& W & B & P" above mean? Just give you a table. Description

& W webpage title
& U webpage address (URL)
& D short date format (specified by "region Settings" in "Control Panel)
& D long Date Format (specified by "region Settings" in "Control Panel)
& T the time format specified by "region Settings" in "Control Panel"
& T 24-hour time format
& P current page number
& P total number of pages
& B text align right (put the text to align right after "& B)
& B text Center (place the text to center between "& B" and "& B)
& Single & number (&)
Note: 1. These symbols can be combined with text. For example, "page number, & P/& P" in this tutorial ".
2. By default, the header and footer are left aligned. Therefore, ie only provides the setting symbol in the right aligned and footer.
3. We recommend that you set the header to be empty and the footer to "& B page & P page/total & P page & B ", the print effect is to display "1st pages/4 pages in total" in the center of the footer.
Once you know the above knowledge, you can print it. But sometimes you will find that some images on the Web page are lost during printing. Why? Why? Do not worry. The default settings of IE do not print the background color and image of the webpage. You only need to enter Internet Options of IE and select (check) it. The specific operation method is as follows: click "Tools"> "Internet Options" in the main menu of IE. In the displayed dialog box, click the "advanced" tab, find "print background color and image. As shown in:

 

Then, check the options circled in red and click "OK.

So far, we have completed the print settings for IE. Next, as long as we haven't disabled IE, we can always use the above settings (the last "print background color and image" Change is always valid) to print. Print and preview before printing. Print after the effect is satisfactory.

 

3. Windows built-in functions
Press and hold the left mouse button, select the content you want to print, and right-click and select print ", in the displayed Print dialog box, select "selected range" in "page range" to print only the content you selected.