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

1.安装依赖

  1. //npm
  2. npm install -S file-saver xlsx
  3. npm install -D script-loader

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

两个js文件地址:

链接:https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
提取码:sirm

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

  

3.在组件中使用

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

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

如此,就可以了。

使用vue导出excel文件的更多相关文章

  1. vue导出Excel文件

    1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...

  2. axios + vue导出excel文件

    (使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...

  3. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  4. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  5. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  6. 纯前端实现数据导出excel文件

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  7. ExtJS Grid导出excel文件

    ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...

  8. PHP从数据库导出EXCEL文件

    参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...

  9. jxl导出Excel文件

    一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...

随机推荐

  1. Nginx内置变量以及日志格式变量

    $args #请求中的参数值$query_string #同 $args$arg_NAME #GET请求中NAME的值$is_args #如果请求中有参数,值为"?",否则为空字符 ...

  2. Eclipse的server选项卡中找不到tomcat配置项

    1.在Eclipse中,如果想开发j2ee,必须要先安装插件.至于具体的插件安装方法,这里不再赘述. 2.当进行到配置tomcat服务器的时候,有时候会出现这种情况: 3.在server选项卡的Run ...

  3. git 清空所有commit记录

    说明:例如将代码提交到git仓库,将一些敏感信息提交,所以需要删除提交记录以彻底清除提交信息,以得到一个干净的仓库且代码不变 1.Checkout git checkout --orphan late ...

  4. COSO企业风险管理框架及其在大宗商品行业的应用

    https://mp.weixin.qq.com/s/P1NDvqsz0GNObm1pb47mfg 中国期货市场交易量领先全球,期权.互换等新的衍生品工具逐步引入,场外衍生品服务商正在涌现.越来越多的 ...

  5. 史上最全的CSP-J/S 第一轮知识点

    CSP-J/S 第一轮知识点选讲 \(NOIP\)(全国青少年信息学奥林匹克竞赛)于2019年取消.取而代之的是由\(CCF\)推出的非专业级软件能力认证,也就是现在的\(CSP-J/S\).作为一名 ...

  6. $O(k^2)$ 求前缀 $k$ 次幂和(与长度无关)

    接下来求解前缀幂次和 求解 \(\sum_{i = 1}^{k} i^k\) \[ \begin{aligned} (p+1)^k - 1 = (p+1)^k - p^k + p^k - (p-1)^ ...

  7. [LeetCode] 916. Word Subsets 单词子集合

    We are given two arrays A and B of words.  Each word is a string of lowercase letters. Now, say that ...

  8. 关于Design Complier/Library Compiler的跌坑(坑爹)记录

    最近需要用DC做一些事,然后需要转库,中午偷个闲,特来记录一下中间的一些坎坷. 1.首先是要转库.我们只有.lib文件的格式,所以需要把.lib文件转换成.db格式.然后坑来了!!!DC2015及以后 ...

  9. Comet OJ - Contest #7 C 临时翻出来的题(容斥+状压)

    题意 https://www.cometoj.com/contest/52/problem/C?problem_id=2416 思路 这里提供一种容斥的写法(?好像网上没看到这种写法) 题目要求编号为 ...

  10. 写了此书《微软Azure实战参考》 北京航空航天大学出版社 2019年7月

    经过大半年的努力,写出了此书<微软Azure实战参考> 北京航空航天大学出版社 2019年7月.喜爱微软云平台和需要使用微软云技术的读者,可以参考一下.