最近做了个运用浏览器打印合同的功能,之前没做过,记录一下其中遇到的问题,打印页面建议使用新开窗口
原型图如下:
页面内容不多说,表格直接用table绘制,在页面顶部加一个悬浮的打印按钮。点击打印按钮调用打印机(ctrl+p)
实现的打印预览效果如下图:
- 打印按钮点击事件
window.print();
- 调起打印时去掉部分元素,比如打印按钮
//给需要去除的元素添加 `not-print` 类样式
//css
@media print {
.not-print {
opacity: 0;
}
}
- 去掉页眉页脚
//使用css去除
@page { margin: 0; }
谷歌浏览器可在打印预览-更多设置-选项中去除页眉和页脚的勾选
- IE 去掉页眉页脚的方法
//打印按钮事件
function print() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
//是否ie
remove_ie_header_and_footer();
}
windo