avue-crud自带的打印功能BUG,在打印时会打印操作栏

问题描述

打印时会显示操作栏

 问题解决效果

 代码如下:

用插槽自定义打印按钮,记得去掉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;//关键代码,打印完成后回复操作栏的显示状态
      });
    },
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_45294459/article/details/127067710