标签搜索
Web

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

Lan
Lan
2021-08-18 / 1 评论 / 19 阅读 / 正在检测是否收录...

有一个任务要求是这样的,将抓取到的数据展示在页面之后,可以点击按钮导出问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
  },
]

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

0

评论 (1)

取消
  1. 头像
    haha
    Windows 10 · Google Chrome

    画图

    回复