vue+js+xlsx实现纯前端导出到入excel表格

vue+js+xlsx实现纯前端导出到入excel表格

1、js-xlsx安装

       1. npm: npm install xlsx

       2. bower: bower install js-xlsx

       3. 下载相关js，页面中直接引用（点击下载）

2、到入excel，解析excel文件成为json格式，调用数据上传接口保存数据。

        直接上代码

        1.html导入按钮及input

<el-button plain size="small" class="drExcel" @click="uploadFile()">
    导入工资Excel表
</el-button>
<span id="fileInput" style="display: none">
   <input type="file" ref="inputer" @change="importFile(this)" id="imFile" style="display: 
   none" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, 
   application/vnd.ms-excel" />
</span>

         2.在data中声明要导入的文件变量，在mounted中获取到input的dom元素并赋值给data中的变量。

data: function() {
	return {
        imFile: '', // 导入文件
	}
}, 
mounted: function() {
	this.imFile = document.getElementById('imFile');
},

        3.点击导入按钮，利用input事件获取到excel文件并转换为json数据。

uploadFile: function () { // 按钮导入
	this.imFile.click()
},
importFile:function(obj) {//input事件
		let thas = this;
		// 通过DOM取文件数据
		this.file = event.currentTarget.files[0];
		var rABS = false; //是否将文件读取为二进制字符串
		var f = this.file;
		var reader = new FileReader();
		//if (!FileReader.prototype.readAsBinaryString) {
		FileReader.prototype.readAsBinaryString = function(f) {
			var binary = "";
			var rABS = false; //是否将文件读取为二进制字符串
			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]);
				}
				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]]);
				this.da = [...outdata]
				let arr = []
				this.da.map(v => {
						let obj = {}
						obj.index = v.编号
						obj.nx = v.工作年限
						obj.ly = v.理由
						obj.nl = v.年龄
						obj.ifno = v.是否通过
						obj.xb = v.性别
						obj.name = v.姓名
						obj.xueli = v.学历
						obj.fs = v.总体分数
						arr.push(obj)
				 })
				 thas.tableData = arr
			}
			reader.readAsArrayBuffer(f);
		}
		if(rABS) {
			reader.readAsArrayBuffer(f);
		} else {
			reader.readAsBinaryString(f);
		}
		this.$refs.inputer.value = '';
},
fixdata: function (data) {  // 文件流转BinaryString
		var o = ''
		var l = 0
		var w = 10240
		for (; l < data.byteLength / w; ++l) {
			o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
		}
		o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
		return o
	}
},

3、导出到excel

       

downloadExl: function () {  // 导出到excel
		var arr = []
		this.tableData.map(v => {
			let obj = {}
			obj.姓名 = v.name;
			obj.编号 = v.index;
			obj.金额 = v.monthlyWages;
			obj.印花税 = v.dues;
			arr.push(obj)
		})
		var header = {header:["姓名","编号","金额","印花税"]}
		const ws = XLSX.utils.json_to_sheet(arr, header)
	  const wb = XLSX.utils.book_new()
	  XLSX.utils.book_append_sheet(wb, ws, "json数据")
	  XLSX.writeFile(wb,"json数据.xlsx")
},

4.小茗同学关于js-xlsx详解