纯前端实现数据导出excel文件
一 安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
二 新建文件夹
在网上百度引入即可
三 在main.js中引入
四 webpack.base.conf.js做如下修改:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss_vars': '@/styles/vars.scss',
'excel': path.resolve(__dirname, '../src/excel'),//新增加一行***
}
},
五 项目中使用
html:
<el-button type="primary" @click="outexcel">导出Excel</el-button>
js:
outexcel(){
this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// this.excelData = this.canhuiList //你要导出的数据list。
console.log(this.canhuiList)
this.export2Excel()
}).catch(() => { });
}, formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['会议标题','大区中心','客户名称','姓名','设备型号','版本','加入时间','离开时间','参会时长',];
const filterVal = ['meetingTitle', 'areaName', 'customName', 'name', 'deviceModel', 'deviceAppVersion','joinTime','leaveTime','joinTimeLong', ];
const list = this.canhuiList;
const data = this.formatJson(filterVal, list);
const autoWidth=true
export_json_to_excel(tHeader, data, '参会记录Excel');
})
},
pass:list是你的数据数组,
tHeader 是你的表头
filterVal 是你对应的参数名(一一对应)
祝你好运QWQ
纯前端实现数据导出excel文件的更多相关文章
- 如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件(转)
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
- js 实现纯前端将数据导出excel两种方式,亲测有效
由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,兼容chrome没问题,其他还没有测试过 通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是 ...
- js 实现纯前端将数据导出excel
通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是html类型的文件而是真正的csv文件,代码如下 <html> <head> <p styl ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- JavaScript 上万条数据 导出Excel文件(改装版)
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- JavaScript 上万条数据 导出Excel文件 页面卡死
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- JS实现前端将数据导出excel
点击此跳到原文,原文有效果动图. 方法一 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但 ...
随机推荐
- AJAX优势、跨域方案及JSON数据格式和浏览器中JSON对象
ajax 不重新加载整个网页的情况下,更新部分网页的技术 注意:ajax只有在服务器上运行才能生效,我在本地一般用phpstudy 优点: 1.优化用户体验 2.承担了一部分本该服务器端的工作,减轻了 ...
- SSM项目下Druid连接池的配置及数据源监控的使用
一,连接池的配置 在pom.xml中添加,druid的maven信息 <dependency> <groupId>com.alibaba</groupId> < ...
- 网页DIV+CSS布局与ifame传统布局对比
通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...
- P2094运输
-------------------- 链接:Miku ------------------- 这是一道水贪心,很容易想到做法就是把最贵的两个放在一块,让后当成一个重新放回队列 ---------- ...
- 【37】池化层讲解(Pooling layers)
池化层(Pooling layers) 除了卷积层,卷积网络也经常使用池化层来缩减模型的大小,提高计算速度,同时提高所提取特征的鲁棒性,我们来看一下. 先举一个池化层的例子,然后我们再讨论池化层的 ...
- 自然语言处理(1)-HMM隐马尔科夫模型基础概念(一)
隐马尔科夫模型HMM 序言 文本序列标注是自然语言处理中非常重要的一环,我先接触到的是CRF(条件随机场模型)用于解决相关问题,因此希望能够对CRF有一个全面的理解,但是由于在学习过程中发现一个算法像 ...
- Mayor's posters POJ - 2528 线段树区间覆盖
//线段树区间覆盖 #include<cstdio> #include<cstring> #include<iostream> #include<algori ...
- Windows配置JDK环境
在系统变量里新建JAVA_HOME变量,变量值为:D:\Program Files\Java\jdk1.8.0_161(根据自己的安装路径填写) 在系统变量里新建classpath变量,变量值为:;% ...
- NIM游戏的Python实现
可执行程序下载: 链接:https://pan.baidu.com/s/1xQedrWRBsqQRZvOe91Rvng 提取码:goi9 Nim游戏是博弈论中最经典的模型(之一),它又有着十分简单的规 ...
- C# sqlite 事务提交多个语句,提升插入速度
private SQLiteConnection connection; private SQLiteCommand command; private SQLiteTransaction transa ...