vue.js页面打印window.print

​

 在项目中，涉及到了html内容打印的需求，调用了浏览器的window.print用于打印，涉及到的问题有需打印input内容缺失，网页显示不全，页眉页脚显示问题

1.如何打印内容

html部分

<div ref="pdfDom">
  xxxxxxx
  xxxxxx
<div>

js部分

 

    //打印dom的内容
    printDomVal(){
      //获取要打印的Dom内容
      let newDomHtml = this.$refs.pdfDom.innerHTML;
      //将要打印的html赋给本页面
      window.document.body.innerHTML = newDomHtml;
      //调用windos的打印接口
      window.print();
      window.location.reload();   //解决打印之后按钮失效的问题，刷新页面
      return false;
    },

显示不全问题

由于window.print是1:1打印，打印内容过宽时，浏览器会自动从左截取掉超宽部分，因此在打印前需将页面进行调整
打印页边距设定为 0mm 时，网页内最大元素的分辨率：794×1123
因此我将内容div设置为700px，剩余空间设置为页边距

页眉页脚问题

由于window.print打印自带页眉页脚，用于存放打印url，日期时间，页面名称等内容，为屏蔽这些内容可使用css进行屏蔽

 

@page{
  margin:0;
  //控制是使用a4还是使用其它纸张规格
  size:auto;
}

我只屏蔽了页脚

 

@page { margin-bottom: 0; }

解决input内容为空的问题

 

 

image.png

在打印页面涉及到了要打印input框，但跳转至打印页面时，原input框中存的框的内容会消失，这里需要在跳转前进行数据重新存储一下

作者：de_self
链接：https://www.jianshu.com/p/301e5f716ad9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

​