1、先引入print.js
复制代码(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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
2、写入html代码，以table表格当分页，table里的style不能删掉，不然实现不了分页
复制代码<a href="javascript:doPrint();">打印</a> <div id="print"> <table style="page-break-after:always">打印1</table> <table style="page-break-after:always">打印2</table> <table style="page-break-after:always">打印3</table> </div>
- 1
- 2
- 3
- 4
- 5
- 6
3、引入jquery，再写入以下方法
复制代码function doPrint() {
$("#print").printArea();
}
- 1
- 2
- 3
wordpress文章nextpage分页最后添加“下一页”按钮
上面是“js实现局部分页打印”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_131.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
