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

2022-07-13 20:42:57 浏览数 (1)

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

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

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

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

代码语言:javascript复制
const exportData = [
  {
    'first':{
      'name':'张三',
      'age':'18',
    },
    'second':{
      'money':1000,
      'data':1
    }
  },{
    'first':{
      'name':'A',
      'age':'18',
    },
    'second':{
      'money':1000,
      'data':1
    }
  },
]

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

代码语言:javascript复制
const exportData = [
  {
    'name':'张三',
    'age':'18',
    'money':1000,
    'data':1
  },{
    'name':'李四',
    'age':'18',
    'money':1000,
    'data':1
  },
]

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

0 人点赞