前端打印功能的实现

最新推荐文章于 2024-06-10 16:43:59 发布

weixin_30295091

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量306

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/fuxun/p/9258235.html

版权

备忘，记录一下。

在需要打印页面生成一个div,ID为“Printing”；状态为display:none;使打印内容隐藏在该页面上，div里面的内容就是打印的内容根据需求填充即可。

然后给打印按钮加点击事件点击时调用该方法，一个简单打印功能就实现了，但是该方法调整样式不是很方便，建议直接直接生成一个页面。

function PrintArticle() {
var pc = document.getElementById("Printing");
var pw = window.open('urlDictionary.ProductList', '', 'width=1200,height=800');
pw.document.write('<!DOCTYPE HTML>');
pw.document.write('<html>');
pw.document.write('<head>');
pw.document.write('</head>');
pw.document.write('<body>');
pw.document.write(pc.innerHTML);
pw.document.write('</body>');
pw.document.write('</html>');
pw.document.close();
pw.print();
return false;
}
$(".Printing").click(function () {
PrintArticle()
})

直接生成页面，这样调整样式相对简单一些。

function PrintArticle() {
var pw = window.open('url', '', 'width=1200,height=800');
pw.print();
return false;
}
$(".Printing").click(function () {
PrintArticle()
})

转载于:https://www.cnblogs.com/fuxun/p/9258235.html