JS调用浏览器的打印功能


字数:417 阅读时长:1分钟 阅读:85

最近做一个后台管理系统,其中有个用户需求要求调用浏览器打印的功能去打印订单,本来以为需要用户手动(Ctrl+P)、或者打开右键菜单,再选择打印功能。后来经过查询文档,JS提供了调用浏览器打印功能的API。

JS 打印

页面(全屏弹窗)内容设计如上图所示:

其中页面右下方有两个按钮:

  • 打印按钮,调用浏览器的默认打印功能
  • 取消按钮,关闭当前全屏展示的弹窗

打印按钮点击事件

1
window.print();

这样可以调用浏览器打印功能,但是打印预览页面上会出现右下方的两个按钮,这肯定是用户不想看到的。
因此还需要根据CSS媒体查询来区分:

调起打印时去掉部分元素(打印按钮)

1
2
3
4
5
6
7
/* 给需要去除的元素添加 `not-print-content` 类样式 */

@media print {
.not-print-content {
display: none;
}
}

去掉页眉页脚

1
2
/* 使用css去除 */
@page { margin: 0; }
  • 谷歌浏览器可在打印预览 > 更多设置 > 选项 中去除 页眉和页脚 的勾选
  • 如果表头或者表格中设置了背景颜色,需要在更多设置中勾选背景图形选项

打印预览

IE去掉页眉页脚的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//打印按钮事件
function print() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
//是否ie
remove_ie_header_and_footer();
}
window.print();
}
//去掉页眉页脚
function remove_ie_header_and_footer() {
var hkey_path =
"HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
try {
var RegWsh = new ActiveXObject("WScript.Shell");
RegWsh.RegWrite(hkey_path + "header", "");
RegWsh.RegWrite(hkey_path + "footer", "");
} catch (e) {}
}

欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-09-23
最后更新: 2021-12-09
本文标题: JS调用浏览器的打印功能
本文链接: https://www.tiven.cn/p/e9eb7987/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^