vue纯前端实现json导出为excel文件(xlsx.full.min.js)

废话不多说，能实现导出为excel的库也不少，这次我用的是xlsx.full.min.js(git地址：https://github.com/SheetJS/sheetjs)
在utils里简单封装一下

import * as XLSX from 'xlsx'
/**
 * 字符串转字符流
 */
const s2ab = (s: string = '') => {
  //字符串转字符流
  let buf = new ArrayBuffer(s.length)
  let view = new Uint8Array(buf)
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  return buf
}
/**
 * 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]
 */
const getCharCol = (n: number) => {
  let s = '',
    m = 0
  while (n > 0) {
    m = (n % 26) + 1
    s = String.fromCharCode(m + 64) + s
    n = (n - m) / 26
  }
  return s
}
/**
 * 将json转换为excel格式流并使用a标签点击下载
 */
const downloadExl = (json: any, type: any) => {
  let tmpdata: any = json[0]
  json.unshift({})
  let keyMap: string[] = [] //获取keys
  //keyMap =Object.keys(json[0]);
  for (let k in tmpdata) {
    keyMap.push(k)
    json[0][k] = k
  }
  tmpdata = []
  json
    .map((v: { [x: string]: any }, i: number) =>
      keyMap.map((k, j) =>
        Object.assign(
          {},
          {
            v: v[k],
            position:
              (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1),
          }
        )
      )
    )
    .reduce((prev: string | any[], next: any) => prev.concat(next))
    .forEach(
      (v: { position: string | number; v: any }, i: any) =>
        (tmpdata[v.position] = {
          v: v.v,
        })
    )
  let outputPos = Object.keys(tmpdata) //设置区域,比如表格从A1到D10
  let tmpWB = {
    SheetNames: ['mySheet'], //保存的表标题
    Sheets: {
      mySheet: Object.assign(
        {},
        tmpdata, //内容
        {
          '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1], //设置填充区域
        }
      ),
    },
  }
  let tmpDown: any = ''
  tmpDown = new Blob(
    [
      s2ab(
        XLSX.write(
          tmpWB,
          {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary',
          } //这里的数据是用来定义导出的格式类型
        )
      ),
    ],
    {
      type: '',
    }
  ) //创建二进制对象写入转换好的字节流
  let href = URL.createObjectURL(tmpDown) //创建对象超链接
  let _a = document.createElement('a')
  _a.setAttribute('href', href)
  _a.setAttribute('download', '这里是excel文件名.xlsx')
  document.body.appendChild(_a)
  _a.click()
  setTimeout(() => {
    //延时释放
    URL.revokeObjectURL(tmpDown) //用URL.revokeObjectURL()来释放这个object URL
  }, 100)
}
export { downloadExl }

在页面使用

import { downloadExl } from '@/utils/util'
let json = [
          {
            提交时间: '2021-05-19 14:57:59',
            用户名称: '张大毛',
            编号: '1',
            更新时间: '2021-05-19 14:57:59',
          },
          {
            提交时间: '2021-05-17 11:32:48',
            用户名称: '王德发',
            编号: '2',
            更新时间: '2021-05-17 11:32:48',
          },
        ]
downloadExl(json)

然后就会直接调起下载

打开看看

可以，非常完美
各位看官点个赞啦