在项目开发中有时候会碰到要求打印页面中的数据的功能需求. 需求原因主要有两点吧, 一是需要打印的数据只是页面的一部分即页面的区域打印, 比如只需要打印页面中表格里面选中的数据等, 二是需要打印出来的样式和页面展示的样式有差别, 比如需要将表格中的列竖着打印出来.
我在开发中主要用到的就是 window.print() 这个 js 函数, 这个函数相当于在页面中右键打印那个功能, 但如果直接使用这个函数会将整个页面打印出来. 所以我们对页面数据的隐藏或者重写一个页面, 得到我们想要打印的数据和样式.
1, 隐藏不需要打印的数据
这种方式只能针对打印出来的样式和页面样式没什么差别的
贴代码
然后调用 window.print() 即可
2, 得到需要打印的数据, 按照打印的样式, 重写一个页面进行打印
先贴代码
- bdhtml = window.document.body.innerHTML;
- window.document.body.innerHTML = prnhtml;
- window.print();
- window.document.body.innerHTML = bdhtml;
- window.document.location.reload();
在这个里面, bdhtml 为原始的页面. prnhtml 为真正调用右键打印的页面, 需要根据实际情况进行拼接. 在页面调用打印之后将页面恢复为原始页面, 并 reload, 防止 js 函数不能正常使用.
在这之后还会遇到的问题 就是页眉, 页脚, 边距等这些了, 这些实际上都是写在注册表里面的, 所以需要修改注册表.
- function PageSetup(name,value) {
- try{
- var HKEY_Path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
- var Wsh = new ActiveXObject("WScript.Shell");
- Wsh.RegWrite(HKEY_Path+name,value);
- }catch(e){
- alert("需要运行 ActiveX 才能进行打印");
- }
- }
- PageSetup("header",""); // 页眉为空
- PageSetup("footer","");// 页脚为空
- PageSetup("margin_left","0mm");// 左边距为 0
- PageSetup("margin_top","0mm");// 上边距为 0
name 大致有这些: header(页眉),footer(页脚),margin_bottom(下边距),margin_left(左边距),margin_right(右边距),margin_top(上边距)
value 的一些常用的大致有这些:&w 窗口标题 ,&u 网页地址 (URL) ,&d 短日期格式 (由 "控制面板" 中的 "区域设置" 指定),&D 长日期格式 (由 "控制面板" 中的 "区域设置" 指定) ,&t 由 "控制面板" 中的 "区域设置" 指定的时间格式 ,&T 24 小时时间格式 ,&p 当前页号 ,&P 网页总数 ,&& 单个 & 号 (&) ,&b 紧跟在这些字符之后的文本居中打印. , &b&b 紧跟在第一个 "&b" 之后的文本居中打印, 跟在第二个 "&b" 之后的文本按右对齐方式打印.
来源: https://www.2cto.com/kf/201807/759199.html