vue2+element 前端表格下载

像牛奶却不是牛奶

已于 2024-12-24 13:13:08 修改

阅读量239

点赞数 2

分类专栏： element-ui 文章标签：前端

于 2024-12-24 13:07:13 首次发布

本文链接：https://blog.youkuaiyun.com/emmmmmmm__/article/details/144691885

版权

element-ui 专栏收录该内容

8 篇文章

订阅专栏

前台下载table表格可下载fixed columns和普通平铺的表格

    exportExcel() {
      const tableContainer = document.querySelector('#table')
      const fixflg = tableContainer ? tableContainer.querySelector('.el-table__fixed') : null
      // const fixflg = document.querySelector('.el-table__fixed') // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，严谨一点的话，应该是document.querySelector(".tableList").querySelector(".el-table__fixed")，确保是在我们导出的表格中出现的固定列
      let wb
      if (fixflg) {
        // 统计行不合并单元格
        const wrapper = fixflg.querySelector('.el-table__fixed-footer-wrapper')
        if (wrapper) {
          const tds = wrapper.querySelectorAll('td')
          for (let i = 0; i < tds.length; i++) {
            tds[i].setAttribute('rowspan', 1)
          }
          wb = utils.table_to_book(document.querySelector('#table').removeChild(fixflg))
          document.querySelector('#table').appendChild(fixflg)
        }
      } else {
        wb = utils.table_to_book(document.querySelector('#table'))
      }
       // 如果没有固定列，则直接转换整个表格
      const wbout = write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        //FileSaver插件，详细的我也没具体看,FileSaver.saveAs我猜测，大概是把blob文件流转为对应类型的文件，并且触发下载功能
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据统计.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
        }
      }
      return wbout
    },