js局部打印

最新推荐文章于 2023-06-05 11:16:17 发布

weixin_30699235

最新推荐文章于 2023-06-05 11:16:17 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/goldenland/p/7389312.html

版权

局部打印的原理：
1、将局部的div等元素的outHTML的值赋给一个新的页面。
2、结果发现局部元素的css样式没有引用过来，导致页面混乱。需要将css一同引用过来。
3、调用window.print()进行打印的时候，发现html字符串中写入了script，报错。需要加一个空字符串变量来隔断。

<img src="../images/dayin.gif" style="cursor:hand" οnclick="myPrint('div1','css1')" />
<div id="div1" class="div1">div里的内容</div>
<script type="text/javascript">
function myPrint(objID, cssName) {
var newWindow = window.open("打印窗口", "_blank"); //新建一个页面
var str = "";
//将需要局部打印的id传入，然后再加上需要用到的样式。最终采用了script的window.print进行打印。
//在html字符串中不能直接写script，会报错，只能在中间加入一个空字符串进行断开。
var docStr = "<html><head><title>打印</title><link rel=\"stylesheet\" type=\"text/css\" href=\"../css/" + cssName + ".css\" /></head><body>" + document.getElementById(objID).outerHTML + "</body><scr" + str + "ipt>window.print();</scr" + str + "ipt></html>";
newWindow.document.write(docStr);
newWindow.document.close();
}
</script>

转载于:https://www.cnblogs.com/goldenland/p/7389312.html