前端导出Excel表格

前端小白总结的笔记，cv直接用...

后端导出

    封装
    export async function derivecloud(data, url) {
  // 发送 POST 请求
  let res = await axios({
    method: 'post',
    url: url,
    data: data,
    responseType: 'blob'
  })
  return res.data
}

引入
async hand_exe() {
  let url = `/api/tbDsjC621thickResult/exportXlsx`
  let data = {
    pageSize: 20,
    pageCount: 11,
    fileName: '文件名称',
    condition: {
      dbegin: '2023-01-04 14:27:13',
      dend: '2023-01-05 14:27:13'
    }
  }
  derivecloud(data, url).then(res => {
    let blob = new Blob([res], { type: 'application/vnd.ms-excel' }) //指定文件MIME
    let a = document.createElement('a')
    a.download = `导出.xlsx` //指定下载的文件名
    a.href = URL.createObjectURL(blob) 
    a.click() // 模拟点击
    URL.revokeObjectURL(a.href) // 释放URL 对象
  })
},

前端导出

封装
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

// id绑定的id，title表格名称
export const excel = (id, title) => {
/* generate workbook object from table */
//  判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
let fix = document.querySelector('.el-table__fixed')
let wb
if (fix) {
 wb = XLSX.utils.table_to_book(
   document.querySelector('#' + id).removeChild(fix)
 )
 document.querySelector('#' + id).appendChild(fix)
} else {
 wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
}

//wb = XLSX.utils.table_to_book(document.querySelector('#'+id));直接这样写，如果存在固定列，导出的excel表格会重复两遍

/* get binary string as output */
let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
 FileSaver.saveAs(
   new Blob([wbout], { type: 'application/octet-stream' }),
   title + '.xlsx'
 )
} catch (e) {
 if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}

调用
html
<div id="out-table">
   <el-table/>
  </div>
js
excel(
   'out-table',
       'XXX' +
       this.showTime[0] +
       '_' +
       this.showTime[1]
   )