在项目中，涉及到了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框中存的框的内容会消失，这里需要在跳转前进行数据重新存储一下
