vue.js页面打印window.print
在项目中，涉及到了html内容打印的需求，调用了浏览器的window.print用于打印，涉及到的问题有需打印input内容缺失，网页显示不全，页眉页脚显示问题1.如何打印内容 html部分
xxxxxxx
xxxxxxjs部分
//打印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 【vue.js页面打印window.print】在打印页面涉及到了要打印input框，但跳转至打印页面时，原input框中存的框的内容会消失，这里需要在跳转前进行数据重新存储一下
推荐阅读
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- Java|规范的打印日志
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- iOS|iOS runtime应用整理
- vue.js|vue中使用axios封装成request使用
- Excel基础知识-打印的那些事（上）
- 8、Flask构建弹幕微电影网站-搭建后台页面-密码修改、主页控制面板
- vue.js组件开发
- vue的cli用法
- 小程序开发|小程序开发 - 页面传值url类型