Excel 前端导出

一、使用插件

像excel.js、xlsx.js、js-export-excel这类插件都可以轻松实现

npm install js-export-excel // 或者
yarn add js-export-excel

示例：

import ExportJsonExcel from 'js-export-excel'
// 模拟数据
const tableItemConfig = [ { label: '序号', prop: 'index' },
    { label: '物料编码', prop: 'materialCode' },
    { label: '物料名称', prop: 'materialName' },
    { label: '规格型号', prop: 'specification', width: 150 },]
const arrayData = [{materialCode:10086,materialName:'篮球',specification:'20*20*20'}]
// 使用
const option: Record<string, any> = {}
option.fileName = '文件名'
option.datas = [
    {
        sheetData: arrayData, // 数组数据
        sheetName: '表格名',
        sheetFilter: tableItemConfig.map(i => i.prop), // 字段prop
        sheetHeader: tableItemConfig.map(i => i.label), // 字段中文
        columnWidths: tableItemConfig.map(i => (i.width ? Math.round(i.width / 15) : 5)), // 列宽
    },
]
const toExcel = new ExportJsonExcel(option)
toExcel.saveExcel()

二、接口返回

接口加工好返回，用a标签下载就行

const downloadFile = (data: any, fileName: any, fileSuffix: any) => {
  let fileTypeMime = '' // 文件 mime 类型，移动端必传，否则下载不成功；pc端可传可不传
  switch (
    fileSuffix // 获取后缀对应的 mime
  ) {
    case 'png':
      fileTypeMime = 'image/png'
      break
    case 'doc':
      fileTypeMime = 'application/msword'
      break
    case 'docx':
      fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      break
    case 'jpg':
    case 'jpeg':
      fileTypeMime = 'image/jpeg'
      break
    case 'gif':
      fileTypeMime = 'image/gif'
      break
    case 'svg':
      fileTypeMime = 'image/svg+xml'
      break
    case 'tif':
    case 'tiff':
      fileTypeMime = 'image/tiff'
      break
    case 'txt':
      fileTypeMime = 'text/plain'
      break
    case 'ppt':
      fileTypeMime = 'application/vnd.ms-powerpoint'
      break
    case 'pptx':
      fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
      break
    case 'xls':
      fileTypeMime = 'application/vnd.ms-excel'
      break
    case 'xlsx':
      fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      break
    case 'zip':
      fileTypeMime = 'application/zip'
      break
    case '7z':
      fileTypeMime = 'application/x-7z-compressed'
      break
  }

  const blob = window.URL.createObjectURL(
    new Blob([data], {
      type: fileTypeMime,
    })
  )
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = blob
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link) //下载完成移除元素
  window.URL.revokeObjectURL(blob) //释放掉 blob 对象
}

//临时表数据下载
export function downloadFiles(configCode: string, query: any) {
  return request({
    url: `/wms/wms-account/${configCode}/download`,
    method: 'get',
    params: query,
    responseType: 'blob',
  }).then((res) => {
    const fileName = window.decodeURI(
      res.headers['content-disposition'].substring(
        res.headers['content-disposition'].indexOf('filename=') + 9
      )
    )
    const fileSuffix = fileName.substring(fileName.indexOf('.'), fileName.length)
    downloadFile(res.data, fileName, fileSuffix)
  })
}

三、WebWorker

​ 如果数据量大需要进一步计算处理，如日期或其他字段的 format 以及格式转换会增加 JS 线程的开销可以使用WebWorker。