js导出变量 vue_Vue+Element前端导入导出Excel

原标题：Vue+Element前端导入导出Excel

来自：SegmentFault，作者：xrkffgg

1、前言

1.1 业务场景

由前台导入Excel表格，获取批量数据。

根据一个数组导出Excel表格。

2、实现原理2.1 引入工具库

file-saver、xlsx、-loader

npm install-S file-saver xlsx

npm install-D -loader 2.2 导入Excel2.2.1 Element 上传控件

class= "upload-demo"

action= ""

: on-change= "handleChange"

: on-exceed= "handleExceed"

: on- remove= "handleRemove"

:file-list= "fileListUpload"

:limit= "limitUpload"

accept= "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"

:auto-upload= "false">

点击上传

只能上传 xlsx / xls 文件

limitUpload = 1限制只能上传1个文件

accept为默认打开的可上传的文件格式

handleChange(file, fileList){

this.fileTemp = file.raw

handleRemove(file,fileList){

this.fileTemp = null

fileTemp这里定义了一下变量，指向最新上传的附件，起始定义为null。

这里发现控件file.raw是我们要用的File类型。

2.2.2 导入判断

if( this.fileTemp){

if(( this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || ( this.fileTemp.type == 'application/vnd.ms-excel')){

this.importfxx( this.fileTemp)

} else{

this.$message({

type: 'warning',

message: '附件格式错误，请删除后重新上传！'

})

}

} else{

this.$message({

type: 'warning',

message: '请上传附件！'

})

} 2.2.3 导入函数importfxx(obj) {

let_this = this;

// 通过DOM取文件数据

this.file = obj

varrABS = false; //是否将文件读取为二进制字符串

varf = this.file;

varreader = newFileReader;

//if (!FileReader.prototype.readAsBinaryString) {

FileReader.prototype.readAsBinaryString = function( f){

varbinary = "";

varrABS = false; //是否将文件读取为二进制字符串

varpt = this;

varwb; //读取完成的数据

varoutdata;

varreader = newFileReader;

reader. = function( e){

varbytes = newUint8Array(reader.result);

varlength = bytes.byteLength;

for( vari = 0; i < length; i++) {

binary += String.fromCharCode(bytes[i]);

}

varXLSX = 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]]); //outdata就是你想要的东西

this.da = [...outdata]

letarr = []

this.da.map( v=>{

letobj = {}

obj.code = v[ '设备ID']

obj.type = v[ '设备型号']

arr.push(obj)

})

returnarr

}

reader.readAsArrayBuffer(f);

}

if(rABS) {

reader.readAsArrayBuffer(f);

} else{

reader.readAsBinaryString(f);

}

arr就是我们要的结果，是一个数组。每一个值是个对象，包含了codetype两个属性。

excel中格式为横向设备ID 和设备型号。

2.3 导出Excel2.3.1 引入JS文件

可参考下载地址-github ：https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel

将其中的2个JS文件放入到自己的工程中。

2.3.2 修改JS文件中地址

打开Export2Excel.js，会出现如上图所示。由于本人将Blob.js和Export2Excel.js放到了同一级，这里引入是这样的。

这几个文件不支持import引入，所以需要-loader来将他们挂载到全局环境下。

2.3.3 导出函数

getExcel(res) {

require.ensure([], => {

const{ export_json_to_excel } = require( '../../introduce/Export2Excel.js')

consttHeader = [ '姓名', '年龄']

constfilterVal = [ 'name', 'age']

constlist = res

constdata = this.formatJson(filterVal, list)

export_json_to_excel(tHeader, data, '导出列表名称')

})

formatJson(filterVal, jsonData) {

returnjsonData.map( v=>filterVal.map( j=>v[j]))

这里的引用请根据自己的层级关系和文件夹命名require('../../introduce/Export2Excel.js')

res为传入的数组，格式如：res =[{name:'小白',age:'18'},{name:'小黑',age:'16'}]

tHeader为导出Excel表头名称，导出列表名称即为导出Excel名称。

下载的Excel位置根据浏览器设置的下载位置而定。

3、后记

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得点赞，谢谢大家

js导出变量 vue_Vue+Element前端导入导出Excel相关推荐

Vue+Element前端导入导出Excel
1 前言 1.1 业务场景由前台导入Excel表格,获取批量数据. 根据一个数组导出Excel表格. 2 实现原理 2.1 引入工具库 file-saver.xlsx.script-loader n ...
linux如何mysql实现导出数据库,Linux下MySQL导入导出数据库
linux下一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): 1.导出数据和表结构: mysqldump -u用户名 -p密码数据库名 > 数据库名.sq ...
mysql数据泵导入导出_ORACLE使用数据泵导入导出部分表
1.导出名字为A的表(这里会导出SEQUENCES及FUNCTION等内容) expdp TEST/TEST@orcl schemas=TEST dumpfile=TEST.dmp DIRECTORY ...
数据库oracle数据导入导出命令,数据库oracle数据导入导出命令
exp Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份. 大多情况都可以用Oracle数据导入导出完成数据的备份和还原(不会造成 ...
Vue + Element 实现导入导出Excel
1.首先搭建Vue 项目(具体可参考以前文章,不再详述:https://blog.csdn.net/qq_42540989/article/details/89853923) 2.引入Element( ...
mysql数据库导出后乱码问题_MySQL导入导出数据出现乱码的解决办法
在mysql导入导出数据时经常出现中文乱码的问题,大多是因类导入导出时编码设置不一致所引起的.本文介绍了不同平台下的编码转换方法,供大家参考. 在linux系统中默认的是utf8编码,而windows ...
mysql导出数据库报错,navicat 导入导出数据库报错的解决
在使用navicat导入导出数据功能时,导出没问题,导入总是报错,还遇到了中文乱码.在网上查了很多资料,比如使用了navicat的数据传输功能,但仍然报错,弄了几个小时都没解决. 最后换了种思路,我直 ...
5.非关系型数据库（Nosql）之mongodb：创建集合，备份与导入导出，数据还原，导入导出
1固定集合固定集合值得是事先创建而且大小固定的集合 2固定集合的特征:固定集合很像环形队列,如果空间不足,最早文档就会被删除,为新的文档腾出空间.一般来说,固定集合适用于任何想要自动淘汰过期属 ...
java 前端导出exvel_使用纯前端做的Excel导出了解一下
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这是我改造的前端Excel导出,需要引入jQuery插件[复制粘贴即可使用],各位不懂可以试一下.纯属练习使用JS标签方式将页面数据信息导出xlsx文件 ...
mysql命令导入导出数据库_MYSQL命令行导入导出数据库详解
Mysql命令行导入数据库: 1,将要导入的.sql文件移至bin文件下,这样的路径比较方便 2,同上面导出的第1步 3,进入MySQL:mysql -u 用户名 -p 如我输入的命令行:mysql ...

js导出变量 vue_Vue+Element前端导入导出Excel

js导出变量 vue_Vue+Element前端导入导出Excel相关推荐

最新文章

热门文章