使用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文件
1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...
- axios + vue导出excel文件
(使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- ExtJS Grid导出excel文件
ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...
- PHP从数据库导出EXCEL文件
参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...
- jxl导出Excel文件
一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...
随机推荐
- Java中用import导入类和用Class方法加载类有什么区别?
import仅仅包含导入操作,并不包含将字节码文件加载进内存这一动作,将字节码文件加载进内存是后续的实例化操作完成的. 例如通过import导入了一堆包和类,但是后续什么都没用(没用实例化),那么导入 ...
- c# 第四节 Net Framework编写应用程序的过程
本节 1:创建.net应用程序所经历的步骤 2:cli是什么 3:程序集是什么 4:jit编辑器 5:托管代码 1:创建.net应用程序所经历的步骤 2:cli是什么 3:程序集是什么 4:jit编辑 ...
- Sentinel 学习资料
Sentinel 学习资料 网址 官方github https://github.com/alibaba/Sentinel 官方中文文档 https://github.com/alibaba/Sent ...
- 09-tensorflow-tf.split()
# 'value' is a tensor with shape [5, 30] # Split 'value' into 3 tensors with sizes [4, 15, 11] along ...
- redixdb 基于redis 协议的实时key-value 存储
redixdb 是一个基于redis 协议搞的一个实时key value 处理的轻量级应用,支持多种后端 存储模型. 以下是一个小版的容器镜像(官方的太大了) dockerfile FROM go ...
- 洛谷P2194 【HXY烧情侣】
首先请允许我吐槽一下这个题面 这个题面透露出血腥与暴力,电影院里还藏汽油 所以情侣们,要是想看电影就在家里看吧 毕竟出来容易被烧 在家里看虽然观影效果不如在电影院里 但是, 起码咱生命安全啥的有保障啊 ...
- 【可视化】Vue基础
作者 | Jeskson 来源 | 达达前端小酒馆 Vue简介 Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点. 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完 ...
- Salesforce 开发新工具 - Visual Studio Code
最近尝试使用Visual Studio Code来做Salesforce的开发工具,体验上比Sublime好用不少,介绍下详细步骤 第一步:下载对应版本的Visual Studio Code 下载地址 ...
- oracle--DG初始化参数
下列参数为Primary角色相关的初始化参数 DB_NAME 注意保持同一个Data Guard中所有数据库DB_NAME相同 例如:DB_NAME=kingle DB_UNIQUE_NAME 为每一 ...
- mysq-5.7忘记密码修改
一,停止mysql /etc/init.d/mysqld stop 二,启动mysql mysqld_safe --skip-grant-tables 安全模式+免验证启动服务 三,登入mysql服务 ...