a-table中固定表头滚动时导出表格png图片

图片导出主要使用html2canvas

npm install html2canvas

a-table表头固定，实际上是将表格分为上下两个部分，表格属性scroll中y动态给予，整个表格导出主要是获取下方主体高度，对clientHeight进行重新赋值

   :scroll="{y:clientHeight}"

关键步骤是导出前更改scroll中y高度，导出后再重新将原y高度赋予回表格

    let clientHeight = document.querySelector(`.ant-table-scroll > .ant-table-body .ant-table-tbody`).clientHeight   //获取表格内容高度
    let clientHeight2 =JSON.parse(JSON.stringify(this.clientHeight))
    this.clientHeight = clientHeight  //重新对表格高度赋值

html2canvas使用

    this.$nextTick(()=>{
      html2canvas(this.$refs.table).then(res=>{
        let imgUrl = res.toDataURL('image/png')
        // console.log('图片临时地址',imgUrl)
        let aLink = document.createElement('a');
        aLink.href = imgUrl;
        aLink.download = '文件.png';	//导出文件名，可动态拼接
        document.body.appendChild(aLink);
        // 模拟a标签点击事件
        aLink.click()
        this.clientHeight = clientHeight2  //赋值结束将原来赋值还回表格
        // 事件已经执行，删除本次操作创建的a标签对象
        document.body.removeChild(aLink)
      })
    })