• 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文件?

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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报错问题

相关文章

  • PHP怎么指定跳出几层循环
  • 为WordPress主题文章纯代码添加历史上的今天列表
  • 帝国CMS提示Table 'XX.***_enewspubtemp_2' doesn't exist错误详解
  • CDR设计制作漂亮婚庆字体
  • 总结laravel中$request获取请求信息用法
  • 聊聊node中怎么使用Nest.js 实现简易版请求监控
  • 如何清除CentOS6或CentOS7上的磁盘空间
  • 关键词优化原创总结
  • 织梦熊掌号api自动提交代码
  • PhotoShop CS6制作逼真动物皮毛立体文字特效教程

文章分类

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

最近更新的内容

    • 完美实现CSS垂直居中的11种方法
    • 一行代码实现全站pjax无刷新加载
    • WordPress主题给文章增加百度是否已收录的功能
    • php中怎么实现ajax提交form表单
    • 在javascript中,NaN是什么类型?
    • 设计师应该从四个方面优化网站
    • Photoshop结合C4D制作三维立体艺术字
    • 3个小时内网站被谷歌,搜搜,有道收录
    • CSS3如何实现图片木桶布局?(附代码)
    • 不得不注意的网站描述优化问题

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

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