vue读取本机的excel文件的两种方式
安装依赖npm install xlsx引入import XLSX from 'xlsx'第一种input通常方式template中加入input<input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload"&am
·
安装依赖
npm install xlsx --save
引入
import XLSX from ‘xlsx’
更新:2022-04-26
最新的xlsx依赖包引入方式改变,以前的直接引入失败了,切换成以下依赖方式:
import { read, utils } from 'xlsx'
第一种input通常方式
template中加入input
<input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">
data中声明变量
data() {
return {
outputs: []
}
},
mounted中绑定事件
mounted() {
this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件
this.readExcel(e);
})
},
调用主函数
readExcel(e) {
var that = this;
const files = e.target.files;
// 如果没有文件名
if(files.length<=0){
return false;
}else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
this.$Message.error('上传格式不正确,请上传xls或者xlsx格式');
return false;
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
// 切换为新的调用方式
const workbook = read(data, {
type: 'binary'
});
// 取第一张表
const wsname = workbook.SheetNames[0];
// 切换为新的调用方式 生成json表格内容
const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(ws);
// 后续为自己对ws数据的处理
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
}
第二种结合element UI 的upload控件实现读取文件并生成数组
PS:以前使用的是element的on-change监听,但是会触发两次读取,因此改成before-upload,只会触发一次读取
<el-upload
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="upload"
:show-file-list="false"
accept=".xlsx,.xls"
style="width: 100px; display: inline-flex;"
>
<el-button
size="mini"
type="text"
>
导入
</el-button>
</el-upload>
upload绑定函数
upload(file,fileList){
console.log("file",file);
console.log("fileList",fileList);
let files = {0: file}
this.readExcel1(files);
}
readExcel1主函数
// 表格导入
readExcel1(files) {
var that = this;
console.log(files);
// 此处判断不严谨,思路只是根据传入的参数校验数据的完整性,可根据自己需求修改
// 如果没有文件名
if(files.length <= 0){
return;
}
if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
this.$Message.error('上传格式不正确,请上传xls或者xlsx格式');
return;
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = read(data, {
type: 'binary'
});
// 取第一张表
const wsname = workbook.SheetNames[0];
// 生成json表格内容
const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(ws);
// 后续为自己对ws数据的处理
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
},
更多推荐
所有评论(0)