Wed printing methods include:
1. JQuery plug-in Jqprint implementation
2. JQery printing plug-in PrintArea for web page Printing
3. CSS controls the webpage printing Style
JQuery plug-in Jqprint implementation:
First, import the js file:
Download jquery. jqprint. js
Copy codeThe Code is as follows:
<Scriptlanguage = "javascript" src = "jquery-1.7.1.min.js"> </script>
<Scriptlanguage = "javascript" src = "jquery. jqprint. js"> </script>
Html code:
Copy codeThe Code is as follows:
<Divclass = "my_show">
This is displayed during printing.
</Div>
<Divclass = "my_hidden">
This is hidden during printing.
</Div>
<Inputtype = "button" id = "print"/>
Javascript code:
Copy codeThe Code is as follows:
<Scripttype = "text/javascript">
$ (Document). ready (function (){
$ ("# Print"). click (function (){
$ (". My_show"). jqprint ();
})
});
</Script>
The plug-in also provides some configurable parameters,
Copy codeThe Code is as follows:
{
Debug: false, // if it is true, the iframe display effect can be displayed (iframe defaults to very small height and width, and can be adjusted in the source code). The default value is false.
ImportCSS: true, // true indicates that the css of the original page is imported. The default value is true. (If it is true, $ ("link [media = print]") is first found. If it is not true, the css file in $ ("link") is not found)
PrintContainer: true, // indicates that if the selected object must be included in the print (Note: setting it to false may break your CSS rules ).
OperaSupport: true // indicates that if the plug-in must also support the operabrowser, it provides a temporary print tab. The default value is true.
}
I only use importCSS: the link on the original page will be imported to iframe. For the first time, the media searchs = print. If not, the normal css file will be imported.
ImportCSS example:
Copy codeThe Code is as follows:
$ ('. My_show'). jqprint ({
ImportCSS: // CSS Style File
});