vue中完成页面局部打印效果

vue中完成局部打印的功能

vue中无法使用传统的打印注释的方式实现局部打印，下面我为大家提供两种vue中实现局部打印的方式

第一种（需要的打开新的窗口，用户有感知）

实现思路：获取需要打印的部分，打开新的窗口，将需要打印的部分放到新的窗口， 并且调用print方法实现打印，新页面只有需要打印的东西，所以可以直接全局打印

	var print= document.getElementById("print").innerHTML;
	var newWindow = window.open();
	newWindow.document.write(dom);
	newWindow.print();

这种方式我们需要把样式写成行内样式，并且打开的窗口不关闭，原本的页面也无法操作

第二种（用户无感知）

实现思路：在body中加一个div与vue入口接口app同级作为打印部分的根节点，打印的时候，将需要打印的部分截取放入div中，这时候需要用到css进行处理

/* 隐藏app元素，让页面只剩下需要打印的部分 */
@media print {
  #app {
    display: none;
  }
/* 设置需要打印部分的样式 */
  .printTemplate {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

通过媒体查询，监听print事件，然后隐藏app，这时候页面上只剩下需要打印的部分。
并且这段样式不会让页面元素隐藏，只会生效在打开的打印窗口上，用户无感知

      const printTemplate = document.getElementsByClassName("printTemplate")[0];
      if (printTemplate) {
      //判断上次打印的东西是否还在，在就删除
        document.body.removeChild(printTemplate);
      }
      try {
      //重新获取到需要打印的部分，然后赋值到根元素
        var dom = document.getElementsByClassName("printContent")[0].innerHTML; //需要打印的部分
        //创建新的标签，将需要打印的部分放入body元素下，再触发prit方法，这个时候，媒体查询监听到打印事件就会隐藏页面其他部分
        //并且这种效果只会作用到打印窗口上面，页面原本的元素不受影响
        var newDom = document.createElement("div");
        newDom.className = "printContent printTemplate";
        newDom.innerHTML = dom;
        document.body.appendChild(newDom);
        window.print();
      } catch (e) {
        console.log(e);
      }

为了保证样式生效，打印部分的样式应该单独写在html文件里面

以上就是我的两种思路，亲测有效，如果有用就点个赞呗！！！