evenfun 发表于 2013-2-7 19:05:46

JS打印指定页面且去样式后的内容,window.print

http://dl.iteye.com/upload/attachment/0076/8459/f34ed36b-2d2f-3468-ba84-4b4ed9bff409.jpg
如图,我们要打印主页面中 工单详情部分。
但是由于要打印的部分有样式,并且表格太宽,如果 要直接打印的话,打出来的纸张上字太小且颜色模糊,不易查看。

只要去掉样式,字体会变大,打印出来的效果要好的多。
方案一:我们可以取出要打印的部分,将打印部分填充到弹出的新页面中,然后我就再打印弹出页面即可。

这样做的话,有个缺陷,就是会先把要打印的页面显示出来,然后要用户再次点击打印按键,显示比较啰嗦蛮烦。

方案二:可以在要打印的页面中,嵌入一隐藏的iframe,用于存放要打印的部分代码。
我们点击打印按钮时,实际上是打印这个隐藏iframe的内容。

打印页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>工单详细信息</title><script type="text/javascript">function printPage() {//获取当前页的html代码var bodyhtml = window.document.body.innerHTML;//设置打印开始区域、结束区域var startFlag = "<!--startprint-->";var endFlag = "<!--endprint-->";// 要打印的部分var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag), bodyhtml.indexOf(endFlag));// 生成并打印ifrmevar syfPrint = document.frames;syfPrint.document.body.innerHTML = printhtml;syfPrint.document.execCommand("Print");}</script></head><body><div id="bd"><div id="right_box"><a href="#" ><< 返回</a><br /><!--startprint-->//////////////////////要打印的内容部分//////////////////////<br /><!--endprint--><input type="button" value="打印"/></div><iframe src="" width="0" height="0" frameborder="0"></iframe></body></html>
页: [1]
查看完整版本: JS打印指定页面且去样式后的内容,window.print