window.print()的简单使用
打印想要的dom元素:如我只想打印下面的表格
printBtn() {
let printHtml = this.$refs.printFrom.innerHTML //获取要打印的dom内容
let bodyHtml = document.body.innerHTML //获取整个页面内容
document.body.innerHTML = printHtml
window.print() //打印
document.body.innerHTML = bodyHtml//还原页面内容
location.reload()
}
在@media print可以设置打印内容所显示的样式
@media print {
.print-wrapper {
display: none;
}
.title-h {
font-size: 20px !important;
text-align: center;
height: 60px;
font-weight: bold;
color: #000;
line-height: 60px;
}
table {
font-size: 14px;
border-collapse: collapse;
}
table.form-print > th,
table.form-print td {
padding: 0 5px;
min-width: 50px;
height: 26px;
border: 1px solid #000;
color: #000;
}
table.form-print td.tb-left {
text-align: left;
font-weight: bold;
text-indent: 20px;
}
table.form-print tr.txt-bold td {
font-weight: bold;
}
table.form-print td.td-bold {
font-weight: bold;
}
.sign-wrap {
font-size: 16px;
color: #000;
}
}
这里是是否展示页眉页脚加上下面的代码为不显示
@page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
效果如下