search

Home  >  Article  >  Web Front-end  >  Introduction to various methods and implementation codes for web printing_javascript skills

Introduction to various methods and implementation codes for web printing_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:44:051289browse

The printing methods of wed that I know are:
1. JQuery plug-in Jqprint implementation
2. JQery printing plug-in PrintArea to implement web page printing
3. CSS control web page printing style

JQuery plug-in Jqprint implementation:
First import the js file:
jquery.jqprint.js download

Copy code The code is as follows:




html code:
Copy the code The code is as follows:


This is displayed when printing

This is hidden when printing.



javascript code:
Copy code The code is as follows:


$(document) .ready(function(){
$("#print").click(function(){
$(".my_show").jqprint();
})
});


The plug-in also provides some configurable parameters,
Copy code The code is as follows:

{
debug:false,//If it is true, the iframe viewing effect can be displayed (the default height and width of the iframe are very small, you can increase them in the source code ), the default is false
importCSS:true, //true means importing the css of the original page, the default is true. (If it is true, it will first look for $("link[media=print]"), if not, it will look for the css file in $("link"))
printContainer:true,//Indicates if the original selection The object must be included in printing (note: setting to false may break your CSS rules).
operaSupport:true//Indicates that if the plug-in must also support the opera browser, in this case, it provides the creation of a temporary printing tab. The default is true
}

and I only use importCSS: the links in the original page will be imported into the iframe. The first time it media searches=print, if not, the normal css file will be imported.

importCSS example:
Copy code The code is as follows:

$('.my_show').jqprint({
importCSS://CSS style file
});
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery implements clicking on the TreeView text parent node to expand/collapse the child nodes_jqueryNext article：jquery implements clicking on the TreeView text parent node to expand/collapse the child nodes_jquery

Related articles

See more