• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > VUE中怎么导出excel文件?

VUE中怎么导出excel文件?

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了VUE中,导出,excel文件等相关知识,希望对您有所帮助

VUE中怎么导出excel文件?

今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,但是现在我的想法是只是用数组数据,不接著与数据流的方式去实现,事实证明是可以的:

1、安装依赖

//npm npm install -S file-saver xlsxnpm install -D script-loader

2、在main.js中进行导入Bolb.js与Export2Excel.js

两个js文件下载:VUE中怎么导出excel文件?JS.zip


VUE中怎么导出excel文件?


import Blob from './excel/Blob'import Export2Excel from './excel/Export2Excel.js'

3、在组件中使用

//导出的方法exportExcel() {    require.ensure([], () => {        const { export_json_to_excel } = require('../excel/Export2Excel');        const tHeader = ['序号', '昵称', '姓名'];        // 上面设置Excel的表格第一行的标题        const filterVal = ['index', 'nickName', 'name'];        // 上面的index、nickName、name是tableData里对象的属性        const list = this.tableData;  //把data里的tableData存到list        const data = this.formatJson(filterVal, list);        export_json_to_excel(tHeader, data, '列表excel');    })}, formatJson(filterVal, jsonData) {    return jsonData.map(v => filterVal.map(j => v[j]))


tHeader是表头,filterVal 中的数据是表格的字段,tableData中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。

如此,就可以了。




分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 浅析什么是装饰器?Vue中怎么使用装饰器?
  • vue中的math.sqrt的用法是什么
  • vue中data改变后让视图同步更新的方法
  • 手把手带你了解Vue中怎么使用filters过滤器?2种用法浅析
  • vue中h5端打开app(判断是安卓还是苹果)
  • VUE中怎么导出excel文件?
  • 如何解决vue中layui报错问题

相关文章

  • 2022-04-29帝国CMS整站源码搭建教程/帝国CMS数据恢复教程
  • 2022-04-29Thinkphp6中怎么封装优化api数据格式
  • 2022-04-29MySQL高并发生成唯一订单号
  • 2022-04-29composer下composer.lock的用处及删除它的方法
  • 2022-04-29thinkphp5视图文件提交form表单后台接收并打印
  • 2022-04-29浅谈小程序中实现图片下载功能的方法
  • 2022-04-29TP6+vue-element-admin实现后台登录验证码
  • 2022-04-29Photoshop制作2013花纹装饰艺术字
  • 2022-04-29如何升级或修改nodejs的版本
  • 2022-04-29PS制作超酷黑白像素文字效果

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PS制作金属字教程
    • 怎么在swarm集群里通过service部署wordpress
    • PHP怎么遍历数组替换数组中的元素的值
    • LNMP环境安装WordPress不显示主题,无法编辑解决方法
    • 解决JavaScript中数组排序sort不发生改变
    • Illustrator绘制心形效果的粉色海报
    • PS制作常用水晶按钮
    • html5的drag和drop的用法示例
    • 解析如何进行Laravel表单验证分层设计和验证场景应用
    • 介绍Thinkphp5之Workerman

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有