js调用浏览器的打印功能

最近做了个运用浏览器打印合同的功能，之前没做过，记录一下其中遇到的问题，打印页面建议使用新开窗口

原型图如下：

image.png

页面内容不多说，表格直接用table绘制，在页面顶部加一个悬浮的打印按钮。点击打印按钮调用打印机(ctrl+p)

实现的打印预览效果如下图：

image.png

• 打印按钮点击事件

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();
  }
  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) {}
},

• 宽度适应

打印的页面不可出现横向滚动条，否则会出现打印出来的内容显示不全的问题。