web前端数据转表格并下载到本地

参考:

https://blog.csdn.net/ygy211715/article/details/89135416

需求:

web前端实现将页面展示的表格数据下载到本地 ( .xlsx 格式)

实现: [ 亲测有效 ]

1. 在 index.html 页面引入 JsonExportExcel.min.js 文件;

文件地址: https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js

当然, 如果能在需要使用的页面按需引入就更好了, 但是我这里没实现

2. 写公用的下载方法

/**
 * @param {Array} filedata  // 生成表格需要的数据 
 * @param {String} filename   // 表格文件的文件名
 * @returns 
 */
 export function exportExcelFile(filedata, filename) {
  if (filedata && filedata.length > 0 && filename) {
    const option = {}
    option.fileName = filename
    option.datas = filedata
    const toExcel = new ExportJsonExcel(option)
    toExcel.saveExcel()
  }
}

3. 调用公用的方法

/** 假设接口返回的表格数据如下 */
const list = [{
  id: 'A000000001',
  orderNum: 'T202112120000001',
  orderName: '手机一台',
  price: '6500',
  address: '北京市XXXXXXXXX01',
  tel: '158XXXX1234'
}, {
  id: 'A000000002',
  orderNum: 'T202112120000002',
  orderName: '笔记本电脑一台',
  price: '16500',
  address: '河北省XXXXXXXXX01',
  tel: '158XXXX4321'
}]

/** 处理接口返回的数据, 并生成如下格式数据 */
const filedata = [{
  // 表格数据内容 ( 如果接口返回数据有时间戳, 需要在此之前自行转化处理 )
  sheetData: list, 
  // 当前工作表的名称( 可以根据需求自己随便写 )
  sheetName: '订单数据',  
  // 定义需要展示的数据与排列顺序( 这里写了才会展示, 例如: list数据中的 id 就不会在生成的表格中显示 )
  sheetFilter: ['orderNum', 'orderName', 'price', 'address', 'tel'],  
  // 定义对应列的标题名称 ( 与 sheetFilter 内的数据要一一对应 )
  sheetHeader: ['订单号', '商品内容', '商品价格', '收货地址', '联系方式']  
}]
/** 生成表格文件名称 */
const filename = `订单数据列表_${new Date().getTime()}`
/** 调用公用方法, 传入相应的数据 */
exportExcelFile(filedata, filename)

4. 运行结果如下 ( 我是在 google 浏览器运行的, 其他浏览器应该可能也都行吧 )

下载的文件如下, 文件名就是上面的 filename

xiazaiwenjian.png

打开文件, 表格内容如下: ( 表 Sheet1 是我在表格内创建的, 只是为了说明区分下 sheetName: '订单数据', 的作用 )

biaogeneirong.png

5. 如果想在一个文件内创建多个工作表单, 只要修改 filedata 格式如下

const filedata = [{
  // 表1的数据与相关设置
  sheetData: list1,
  sheetName: '表1名称',
  sheetFilter: ['',''],
  sheetHeader: ['','']
}, {
  // 表2的数据与相关设置
  sheetData: list2,
  sheetName: '表2名称',
  sheetFilter: ['',''],
  sheetHeader: ['','']
}]