Vue3将数据导出为Excel—公司偷学技术的第1天

SingYi

发布于 2022-07-13 20:42:57

1.9K0

发布于 2022-07-13 20:42:57

文章被收录于专栏：Lan小站

有一个任务要求是这样的，将抓取到的数据展示在页面之后，可以点击按钮导出问Excel文件。然后我翻项目原先的代码，也有类似的功能，并且导出之后网络图片也能够保存下来。用到了js-table2excel 第一步安装 npm install js-table2excel 第二步引入 import table2excel from 'js-table2excel' 第三步使用 table2excel([列集合], [数据集合], '导出文件名')

第三步生成表格需要传入三个参数列集合，数据集合和文件名。列集合格式如下：

const column = [
  {
    'title':'表格中显示的标题',
    'key':'数据集合中的键',
    'type':'数据类型，text，image',
    'width':'如果type为image可以设置宽度',
    'height':'如果type为image可以设置高度',
  },{
    'title':'表格中显示的标题',
    'key':'数据集合中的键',
    'type':'数据类型，text，image',
    'width':'如果type为image可以设置宽度',
    'height':'如果type为image可以设置高度',
  },
]

至于数据集合这块要求不能套娃，就是数据必须全部在第一层，我就是因为这个然后踩坑了，不得不重新将数据清洗才传入，我的大概就是这样的。

const exportData = [
  {
    'first':{
      'name':'张三',
      'age':'18',
    },
    'second':{
      'money':1000,
      'data':1
    }
  },{
    'first':{
      'name':'A',
      'age':'18',
    },
    'second':{
      'money':1000,
      'data':1
    }
  },
]

然后就报错了，被迫改成这样

const exportData = [
  {
    'name':'张三',
    'age':'18',
    'money':1000,
    'data':1
  },{
    'name':'李四',
    'age':'18',
    'money':1000,
    'data':1
  },
]

图片源于网络，差不多这样