vue导出excel加一个进度条_使用vue导出excel文件
今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是现在我的想法是只是用数组数据,不接著与数据流的方式去实现,事实证明是可以的:
1.安装依赖
//npm
npm install -S file-saver xlsx
npm install -D script-loader
2.在main.js中进行导入Bolb.js与Export2Excel.js
两个js文件地址:
链接:https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
提取码:sirm
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中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。
如此,就可以了。
vue导出excel加一个进度条_使用vue导出excel文件相关推荐
- vue导出excel加一个进度条_运用vue导出excel碰到的那些坑
需求: Vue+element UI el-table下的导出当前一切数据到一个excel文件里. 先根据网上的要领,看看有哪些坑 准备工作: 1.装置依靠:yarn add xlsx file-sa ...
- vue导出excel加一个进度条_vue纯前端导出excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
- vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖 进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
- vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
- vue导出excel加一个进度条_vue 实现excel导出功能
最近Vue项目中用到了导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 我是使用vue-cli3.0的框架,所以在安装过程中没有遇到 ...
- vue导出excel加一个进度条_vue 实现Excel 导入导出功能
第一步:安装依赖 使用npm: npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 或使用yarn: ya ...
- vue导出excel加一个进度条_vue项目中如何把数据导出成excel文件
Loading... 关于vue中如何把数据导出成excel文件 ### 1. 安装依赖 ``` yarn add file-saver yarn add xlsx yarn add script-l ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- bootstraptable treeGrid 懒加载_为 Vue 的惰性加载加一个进度条
简介 通常用 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 CSS 文件)都会被一起加载.在处理大文件时,这可能会导致用户体验不佳. 借助 Webpack,可以 ...
最新文章
- web站点的欢迎页面
- hibernate学习(4)
- 将Websocket与Spring Framework和Vuejs结合使用
- 【软件架构】三层架构和MVC的比较
- C++ STL vector的输出
- 51NOD - 1381 1381 硬币游戏【思维+数学期望】
- 解决华为手机无法使用Android StudioUSB调试功能
- HDU 6287 口算训练(分解质因子 + 二分下标)
- Elsevier论文模板没有author biography的解决办法
- css 网站大背景(按比例缩放背景图片)
- Android一键清理原理
- 出现Whitelabel Error Page的解决方法(持续更新带图并总结了其他博文)
- html CSS笔记
- 学术-数学:黎曼猜想
- 最新超唯美Like_Girl V5.0.0恋爱主题博客源码
- 解决 git clone fatal: unable to access ‘https://github.com...‘: 的一种方法
- Linux下红外线适配器的使用
- C(n,m);二项式系数公式
- 大学计算机操作系统实验报告,四川大学计算机操作系统第四实验报告
- 谷歌adwords教程_6种增加Google AdWords转化率的方法
热门文章
- HTML5中利用JavaScript实现拖放(来回)的案例
- java实训答辩ppt_基于JavaSwing的工作考勤管理系统设计与实现毕业论文+开题报告+实习报告+实习日历+答辩PPT+项目源码...
- 中国海洋捕捞市场投资前景分析及“十四五”规划建议报告2022年版
- input输入框输入中文时,需要计数input输入的汉字数,解决拼音输入的时候计数问题
- 数据脱敏:保障数据安全的脱敏方案
- REST ful规范
- Java 内存分区之什么是 CCS区 Compressed Class Space 类压缩空间
- Python 汽车之家 车型销量--参数分析与实现
- Ubuntu系统迁移至固态硬盘(生产环境勿用)
- html 字体形状,二十款漂亮的CSS字体样式