jQuery partial printing of batch printing

Last month, I got a batch printing function. I thought it might be useful in the future, so I wrote a blog and wrote it down, so as not to forget it. Before talking about this, let's talk about the two printing plugins I have used, one is the Jquery printing plugin (started this time), and the other is the printing plugin for the smsx.cab control. Let's talk about jQuery's local printing function first (personally, jqprint and PrintArea have similar printing functions, so let's talk about the simpler PrintArea)

 

1. Guide the Jquery library : If you want to use the functions of Jquery, you have to have someone's internal library. This is beyond doubt.

 

2. Import jquery.PrintArea.js : Import after importing the jquery library. Its source code is as follows:

(function($) {
	var printAreaCount = 0;
	$ .fn.printArea = function () {
		var ele = $(this);
		var idPrefix = "printArea_";
		removePrintArea(idPrefix + printAreaCount);
		printAreaCount ++;
		var iframeId = idPrefix + printAreaCount;
		var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
		iframe = document.createElement('IFRAME');
		$(iframe).attr({
			style : iframeStyle,
			id : iframeId
		});
		document.body.appendChild(iframe);
		var doc = iframe.contentWindow.document;
		$(document).find("link").filter(function() {
			return $(this).attr("rel").toLowerCase() == "stylesheet";
		}).each(
				function() {
					doc.write('<link type="text/css" rel="stylesheet" href="'
							+ $(this).attr("href") + '" >');
				});
		doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
				+ '</div>');
		doc.close();
		var frameWindow = iframe.contentWindow;
		frameWindow.close();
		frameWindow.focus();
		frameWindow.print();
	}
	var removePrintArea = function(id) {
		$("iframe#" + id).remove();
	};
})(jQuery);

3、demo：

<input type="button" id="btnPrint" value="打印"/>
<div id="printContent">Content area to be printed<div>

<script type="text/javascript">
$(function(){
        $("#btnPrint").click(function(){ $("#printContent").printArea(); });
});
</script>

 4. Say a problem that I may have encountered and that I have solved: the printed stuff has no style .

Solution: Extract all the styles in the <style> tag in the page and put them into a css file, and then import the css file into the page.

Why this can be solved:

First look at the source code of jquery.PrintArea.js, its implementation principle can basically be understood as follows:

When you click "Print", it first generates an iframe in the page (width and height are 0, left and top are -500, so that the frame cannot be seen on the current page),

Then the css file introduced in the page (link method) is also introduced into the iframe,

Then copy the content of the selected area (the object selected by the jquery selector) into the iframe,

Finally, call the system's print() method to print.

After understanding the source code, it's easier to understand "the printout has no style", because it only deals with the style in the <link> tag, not the style in <style>.

 

One more word by the way: When solving this problem, I saw someone say that in addition to extracting CSS content into a file, you also need to add "media=print" to the <link> tag, I tried to add it and print it out There are styles, but the page is displayed without styles. I don't know if there is something wrong with what I wrote, or something is wrong.

 

5. Talk about the advantages :

There are at least two: a. It can be printed locally , which block you want to print, and you don’t need to worry about other irrelevant content when printing; b. The compatibility is good , because the print( of the window object is called. ) method, and all browsers support this method (tried IE8, IE11, Firefox, Google, 360, QQ, and the results are all good);

 

6. Talk about the disadvantages :

There are also at least three: a. When printing, pop up the print box every time to select the printer , which is annoying in the case of automatic printing; b. It comes with headers and footers . If you do not set the page when printing, it will be automatically added. The headers and footers are not easy to remove, and you also need to manually set the margins, which is also annoying. c. Without preview, you need to use other plugins for preview, such as jquery-print-preview-plugin-master (a bit complicated).