导出excel功能,前端的解决方案

import { utils, writeFileXLSX } from 'xlsx'
// 导出excel
async exportToExcel() {
  // 获取要导出的业务数据(这里的接口自己改成实际使用的接口)
  const res = await getRuleListAPI(this.params)
  // 表头英文字段key(这里的数据改成接口返回的实际数据,原则是即是用来下载成export的表头又是后台返回的数据,这样才好从后台的数据里面分离出我们要的数据。)
  const tableHeaderKeys = ['ruleNumber', 'ruleName', 'freeDuration', 'chargeCeiling', 'chargeType', 'ruleNameView']
  // 表头中文字段value(这里改成需要展示的数据,一般来说和上面的英文的都是对应关系。用于表格输出后的表头)
  const tableHeaderValues = ['计费规则编号', '计费规则名称', '免费时长(分钟)', '收费上线(元)', '计费方式', '计费规则']
  // 以excel表格的顺序调整后端数据
  const sheetData = res.data.rows.map((item) => {
    const obj = {}
    tableHeaderKeys.forEach(key => {
      obj[key] = item[key]
    })
    return obj
  })
  // 创建一个工作表
  const worksheet = utils.json_to_sheet(sheetData)
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 把工作表添加到工作簿(这个Data是表名,可以自己改)
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头(origin是起始位置的意思)
  utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })
  // 这个最后的是工作簿的名称,即文件名。
  writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}

这个xlsx需要npm i,官网放在这Data Export | SheetJS Community Edition

一般下载的命令是

npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

该修改的,都用小括号括起来了。这个csdn工具的原因,只能写成这样。

你可能感兴趣的:(自用工具,其他)