Vue自定义组件封装及使用Excel
一、js-xlsx 组件安装
npm install xlsx --save
npm install -S file-saver
npm install -D script-loader
二、 创建vue组件
在项目根目录 src\components下创建 importExcel.vue 文件
importExcel.vue 文件代码:
<template>
<span style="margin-right:10px">
<input
class="input-file"
type="file"
@change="exportData"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
/>
<el-button :loading="btnLoading" size="medium" type="primary" icon="el-icon-upload" @click="selectFile">上传Excel</el-button>
</span>
</template>
<script>
// 引入组件
import XLSX from "xlsx";
export default {
data() {
return {
btnLoading: false,
};
},
methods: {
// 选择文件
selectFile() {
this.btnLoading = true;
document.querySelector(".input-file").click();
},
// 导出xml数据
exportData(event) {
if (!event.currentTarget.files.length) {
this.btnLoading = false;
return;
}
const that = this;
// 拿取文件对象
var f = event.currentTarget.files[0];
// 用FileReader来读取
var reader = new FileReader();
// 重写FileReader上的readAsBinaryString方法
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var wb; // 读取完成的数据
var outdata; // 需要导出的数据
var reader = new FileReader();
reader.onload = function() {
// 读取成Uint8Array,再转换为Unicode编码(Unicode占两个字节)
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
// 接下来就是xlsx了,具体可看api https://www.npmjs.com/package/xlsx
wb = XLSX.read(binary, {
type: "binary"
});
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
that.btnLoading = false;
// 自定义方法向父组件传递数据
that.$emit("getResult", outdata);
};
reader.readAsArrayBuffer(f);
};
reader.readAsBinaryString(f);
}
}
};
</script>
<style>
.input-file {
display: none;
}
</style>
三、使用
在需要的vue文件使用
<template>
<div>
<import-excel @getResult="getMyExcelData" />
</div>
</template>
<script>
// 引入自定义组件
import importExcel from "@/components/importExcel.vue";
export default {
data() {
return {
};
},
components: {
// 注册自定义组件
importExcel
},
methods: {
getMyExcelData(data) {
// data 为读取的excel数据,在这里进行数据处理
console.log(data);
}
}
};
</script>