问题描述
打印时会显示操作栏
问题解决效果
代码如下:
用插槽自定义打印按钮,记得去掉option中的printBtn:true,
此处的打印,在试了很多组件后,决定使用vxe-table的打印组件,(也可以不使用其他组件,根据avue的打印功能去写,此处需要在打印时合并表头并且数据列多,所以采用了vxe的打印)关键代码如下
this.option.menu = false;//关键代码,将avue的操作栏设为false,此时表格的操作栏不显示
this.option.menu = true;//关键代码,打印完成后回复操作栏的显示状态
html部分
<template slot="menuRight" slot-scope="{ size }">
<el-button
size="small"
@click="printWord"
circle
icon="el-icon-printer"
></el-button>
</template>
js部分
<script>
import VXETable from "vxe-table";
export default {
methods:{
printWord() {
this.option.menu = false;//关键代码,将avue的操作栏设为false,此时表格的操作栏不显示
this.$nextTick(() => {
const printStyle = `
table {
border-collapse:collapse;
width:100%;
}
table td,table th {
border:1px solid #D0D0D0;
text-align: center;
}
table th {
border-bottom:none;
font-weight:normal;
}
`;
const divEl1 = `<table style="width:100%;"><tr><td colspan="2" style="font-size:20px;text-align: center; font-weight: 600;">xxxxxx</td></tr><tr><td style="text-align:left;border-bottom:none;border-right:none">项目名称:${this.proName}</td><td style="text-align:right;border-bottom:none;border-left:none"">项目编号:${this.proCode}</td></tr></table>`;
const divEl = document.getElementsByClassName(
"el-table__header-wrapper"
)[0];
VXETable.print({
sheetName: "打印下面区域",
style: printStyle,
content: divEl1 + divEl.innerHTML,
});
this.option.menu = true;//关键代码,打印完成后回复操作栏的显示状态
});
},
}
}