js使用window.print()来实现打印功能
1.首先在需要打印的内容标签上面绑定ref
<div ref="tableRef">需要打印的内容</div><!--点击按钮打印--><el-button @click="billPrintClick" >打印</el-button>
2.按钮打印事件
billPrintClick() {let newstr = this.$refs.tableRef.innerHTML // 获取需要打印的内容let oldstr = document.body.innerHTML // 获取别打印页面的内容document.body.innerHTML = newstr // 获取表格表头，表格内容改变打印内容字体的颜色document.getElementsByTagName('thead')[0].style.color = '#000'document.getElementsByTagName('tbody')[0].style.color = '#000'window.print()document.body.innerHTML = oldstrwindow.location.reload() // 退出刷新页面return false}
3.设置打印布局（横向、纵向、边距）
@media print {@page {// 纵向size: portrait; // 横向size: landscape;// 边距margin: 0cm 0cm 0cm 0cm;}}
4.去除浏览器默认页眉页脚
打印时默认有页眉页脚信息，显示在页面外边距范围，我们可以通过去除页面模型page的外边距，使其隐藏页眉页脚信息，再通过设置 body 元素的 margin 来保证打印出来的页面带有外边距
@media print {@page {margin: 0;}body {margin: 1cm;}}
window.open()使用新窗口打印
我们还可以使用新窗口打印，将要打印的HTML，赋值给新窗口的body，打印之后我们再将之关闭
// 获取打印的区域let newstr = this.$refs.tableRef.innerHTML; // 将打印的区域赋值给新窗口body，进行打印let newWindow = window.open('','');newWindow.document.write(newstr);newWindow.window.print();newWindow.window.close(); // 打印完成后关闭后新窗口
