登录  |  注册
当前位置：网站首页 > 更多 > 站长帮 > 正文

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

作者：CC下载站 日期：2021-08-18 00:00:00 浏览：68 分类：站长帮

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

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

猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯