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