vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装
前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html
新建一个js文件。
import Vue from 'vue'; /**
* @method formatJson
* @param {Array} filterVal 导出表头的中文表头对应的英文名称
* 例:['name', 'age']
* @param {Array} jsonData 导出的数据
* 例:[{
* name: '张三',
* age: 14
* }]
* @return {Array} 组装成需要导出的excel数据
*/
let formatJson = (filterVal, jsonData) => {
return jsonData.map(v => filterVal.map(j => v[j]));
}; /**
* @method dateTransition
* @param {Array} outdata excel表导入的数据
* 例:[{
* 姓名: '张三',
年龄: 14
* }]
* @param {Array} importModel excel表头中文名称和其对应的英文名称
* 例:[{
* label: '姓名',
* value: 'name'
* },{
* label: '年龄',
* value: 'age'
* }]
* @return {Array} 组装成需要导入的excel数据
*/
let dateTransition = (outdata, importModel) => {
console.log('outdata', outdata);
console.log('importModel', importModel);
let importData = [];
for(let item of outdata) {
let obj = {};
for(let key in item) {
for(let childItem of importModel) {
if(key === childItem.label) {
obj[childItem.value] = item[key];
break;
}
}
}
importData.push(obj);
}
return importData;
}; /**
* @method $exportExcel
* @param {Array} tHeader 导出表格的中文表头
* 例:['姓名', '年龄']
* @param {Array} filterVal 导出表头的中文表头对应的英文名称
* 例:['name', 'age']
* @param {Array} exportList 导出的数据
* 例:[{
* name: '张三',
* age: 14
* }]
* @param {String} excelName 导出的excel表格名称
* @return {null} 无返回值
*/
Vue.prototype.$exportExcel = (tHeader, filterVal, exportList, excelName) => {
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel'); //引入文件
tHeader.unshift('序号');
filterVal.unshift('index');
for(let i = 0;i < exportList.length;i++){
exportList[i].index=i+1+'';
}
const data = formatJson(filterVal, exportList);
console.log('data', data);
export_json_to_excel(tHeader, data, excelName);
});
}; /**
* @method $importExcel
* @param {Object} event 文件表单触发change事件的event对象
* @param {Array} importModel excel表头中文名称和其对应的英文名称
* 例:[{
* label: '姓名',
* value: 'name'
* },{
* label: '年龄',
* value: 'age'
* }]
* @return {null} 无返回值
*/
// 导入
Vue.prototype.$importExcel = (event, importModel) => {
return new Promise((resolve, reject) => {
var f = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串 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 = dateTransition(outdata, importModel);
resolve(importList);
}
reader.readAsArrayBuffer(f);
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
});
};
vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装的更多相关文章
- php操作excel表格的导入和导出
前言:对于excel大家肯定熟悉不过了的,那么我们在日常的业务中应该是有对这些文件的导入导出操作的 类的下载:composer require phpoffice/phpexcel,其中Classes ...
- 【面试题】js实现将excel表格copy到页面
js实现将excel表格copy到页面 点击打开视频讲解更加详细 其实最核心的技术,还是copy的是我们粘贴板上的数据 就像平常怎么粘贴复制其他的数据一样,只是我们在excel粘贴的是一个表格数据 这 ...
- vue中excal表格的导入和导出
注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx 和 npm install -D script-loader.其 ...
- 使用PHPExcel实现Excel文件的导入和导出(模板导出)
在之前有写过一篇文章讲述了使用PHP快速生成excel表格文件并下载,这种方式生成Excel文件,生成速度很快,但是有缺点是:1.单纯的生成Excel文件,生成的文件没有样式,单元格属性(填充色,宽度 ...
- vue项目 引入js文件
例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...
- 【翻译】将Ext JS Grid转换为Excel表格
原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...
- C# 在excel表格中检索并导出数据
由于工作需要,我经常使用excel文档来存储和处理各种数据,在生活中偶尔也会使用excel表格来记录各种开销,相信很多朋友也和我一样.Excel的功能很强大,其中一个很实用的数据处理功能就是查找和替换 ...
- 数据库数据生成Excel表格(多用在导出数据)
最近在项目开发中遇到这样一个需求,用户聊天模块产品要求记录用户聊天信息,但只保存当天的,每天都要刷新清空数据,但聊天记录要以Excel的形式打印出来,于是就引出了将数据库的数据导出成Excel表格的需 ...
- Excel表格数据导入MySQL数据库
有时候项目需要将存在表格中的批量数据导入数据库,最近自己正好碰到了,总结一下: 1.将excel表格另存为.csv格式文件,excel本身的.xlsx格式导入时可能会报错,为了避免不必要的格式错误,直 ...
随机推荐
- 解决oracle v$sqlarea sql不完整
解决oracle v$sqlarea sql不完整根据SELECT * FROM v$sqlarea中找到hash_value然后执行SELECT * FROM v$sqltext WHERE has ...
- 洛谷 P3455 [POI2007]ZAP-Queries (莫比乌斯函数)
题目链接:P3455 [POI2007]ZAP-Queries 题意 给定 \(a,b,d\),求 \(\sum_{x=1}^{a} \sum_{y=1}^{b}[gcd(x, y) = d]\). ...
- Django Model里的__str__以及Meta
举个栗子,注释已经比较详细了 name = models.CharField(max_length=30,verbose_name='标签名称') #max_length=30里的30在mysql以前 ...
- cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用)
cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用) alipaySdk已更新至20170725版本 支付宝WS_APP_PAY_SDK_BASE_2.0 &l ...
- $@、$*和环境变量IFS
- alter update
## sql alter update 添加.修改.删除字段 ## 添加列名alter table 表名 add 列名 列类型;alter table 表名 add 列名 列类型 not null d ...
- centos 单用户登陆模式操作
在centos中因为安装java而配置 jdk环境变量的原因,对/etc/profile文件进行了编辑 错误的环境变量配置导致在第一次修改profile文件并保存后,执行source /etc/pro ...
- phpStudy的安装和配置
一,下载工具 官网:http://www.phpstudy.net/,选择自己要安装的版本 二.多个站点和域名配置 1.打开phpStudy=>点击“其它选项菜单”=>点击“站点域名管理” ...
- Java 基础 - 如何理解String不可变
ref: https://www.zhihu.com/question/20618891 第一个答案. 扩展“ Java 基础 - System.arraycopy() 浅拷贝 深拷贝
- read more阅读更多,文字超过三行字符后面添加省略号
var text;$('.blog-item').each(function (i) {text = $(this).find('.blog-excerpt').html();if (text.len ...