vue中excal表格的导入和导出
注意:vue中要实现表格的导入与导出,首先要install两个依赖,
npm install -S file-saver xlsx 和 npm install -D script-loader。其次,在项目src目录下新建一个文件夹vendor(名字随意),在此文件夹下放置两个文件Blob.js和Export2Excal.js(下载地址:http://files.cnblogs.com/files/luyuefeng/vendor.rar)。之后就可以愉快的导入导出了。
1、导入
<input id="upload" type="file" @change="importfxx()" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
importfxx(obj) {
let _this = this;
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.file = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file;
var reader = new FileReader();
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var rABS = false; //是否将文件读取为二进制字符串
var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function(e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for(var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var XLSX = require('xlsx');
if(rABS) {
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
type: 'base64'
});
} else {
wb = XLSX.read(binary, {
type: 'binary'
});
}
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
let importList = _this.dateTransition(outdata);
}
reader.readAsArrayBuffer(f);
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
};
// 将对应的中文key转化为自己想要的英文key
dateTransition(outdata) {
let list = [];
var obj = {};
for(var i = 0; i < outdata.length; i++) {
obj = {};
for(var key in outdata[i]) {
if(key == '工号') {
obj['jobNumber'] = outdata[i][key];
} else if(key == '姓名') {
obj['name'] = outdata[i][key];
} else if(key == '部门') {
obj['department'] = outdata[i][key];
}
}
list.push(obj);
}
return list;
};
例如:现有一张excel表格需要导入。
导入后,获取到的outdata为
outdata = [
{
"姓名": "张三",
"工号": "1001",
"部门": "技术部"
},
{
"姓名": "李四",
"工号": "1002",
"部门": "技术部"
},
];
这里获取到outdata的json格式的key值对应的是导入的excel表格中的表头名称,往往都是中文的,要想把中文key转化为自己想要的英文key就需要用到dateTransition函数了。
通过dateTransition函数转化后对应的importList变为
importList = [
{
"name": "张三",
"jobNumber": "1001",
"department": "技术部"
},
{
"name": "李四",
"jobNumber": "1002",
"department": "技术部"
}
];
2、导出
<input type="button" value="导出" @click="exportExcel" />
exportExcel() { //兼容ie10哦!
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel'); //引入文件
const tHeader = ['姓名', '工号', '部门']; //将对应的属性名转换成中文
//const tHeader = [];
const filterVal = ['name', 'jobNumber', 'department'];//table表格中对应的属性名
const list = exportData; //想要导出的数据
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]));
}
这里的exportData就是你想要导出的数组
exportData = [
{
"name": "张三",
"jobNumber": "1001",
"department": "技术部"
},
{
"name": "李四",
"jobNumber": "1002",
"department": "技术部"
}
];
导出的excel表
vue中excal表格的导入和导出的更多相关文章
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...
- SpringBoot中关于Excel的导入和导出
前言 由于在最近的项目中使用Excel导入和导出较为频繁,以此篇博客作为记录,方便日后查阅.本文前台页面将使用layui,来演示对Excel文件导入和导出的效果.本文代码已上传至我的gitHub, ...
- vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装
前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html 新建 ...
- php操作excel表格的导入和导出
前言:对于excel大家肯定熟悉不过了的,那么我们在日常的业务中应该是有对这些文件的导入导出操作的 类的下载:composer require phpoffice/phpexcel,其中Classes ...
- Qt中csv文件的导入与导出
转自:http://blog.csdn.net/mingxia_sui/article/details/7683030 CSV 1.简介: 全称:Comma Separated Values. 是“逗 ...
- 在C#中关于excel的导入和导出操作
一.先来看看最常见的导入操作吧! private void Import() { //打开excel选择框 OpenFileDialog frm = new OpenFileDialog(); frm ...
- Sqoop_具体总结 使用Sqoop将HDFS/Hive/HBase与MySQL/Oracle中的数据相互导入、导出
一.使用Sqoop将MySQL中的数据导入到HDFS/Hive/HBase watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWFyb25oYWRvb3A=/ ...
- vue中如何在本地导入js文件
import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...
- ASP.NET Core MVC上传、导入、导出知多少
前言 本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天才研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 ...
随机推荐
- 1、获取APP 冷/热启动时间
最近在研究Android APP性能测试.所以发现一些有趣的东西,在这里进行分享.我们先讲第一个内容,如何获取APP冷/热启动时间?为什么要做这个测试,道理其实很简单,如果启动APP特别耗时的话,用户 ...
- centos安装vbox addition
在centos下安装vbox addition需要下载当前内核的头文件 yum install kernel-devel 但是下载了头文件后,仍然失败,原来是下载的头文件与当前的内核版本不对应, 于是 ...
- idea plugin 进度条
ProgressManager.getInstance().run(new Task.Backgroundable(project, "Switching Env") { @Ove ...
- 无法CREATE UNIQUE INDEX;找到重复的关键字
- D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖 ...
- react 使用触摸事件
react开发支持的事件中,onClick事件,部分标签不支持点击,只能onTouchEnd,但是在移动端,手指触碰到事件绑定元素上,滑动,也会触发该事件,故来share解决办法,有更好的方法,欢迎评 ...
- ajax--getJSON
penson.json [ { "name":"张三", "age":25, "sex":"男", ...
- 22. 异常(Eception)
1. 现实生活的病 现实生活中万物在发展和变化会出现各种各样不正常的现象. 1)例如:人的成长过程中会生病. |——病 |——不可治愈(癌症晚期) |——可治愈 |——小病自行解决(上火,牙痛) |— ...
- Python 刷题知识点
if : elif : else : print('{0} \n{1} \n{2}' .format((a + b), (a - b), (a * b))) print(*[num**2 for nu ...
- Q: 微信小程序登录
这里使用的mpvue 第一步组件DOM部分 /pages/index <button class="app_btn" open-type="getUserInfo& ...