vue 导入excel解析-凯发k8官方网
因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据。找了网上的资料后发现js-xlsx可以实现。
首先安装依赖：
$ npm install xlsx
html部分：
引入：
import xlsx from 'xlsx'
设置数据：
data() {
return {
outputs: []
}
},
给input标签绑定监听事件：
mounted() {
this.$refs.upload.addeventlistener('change', e => {//绑定监听表格导入事件
this.readexcel(e);
})
},
读取excel文件信息并输出内容：
methods: {
readexcel(e) {//表格导入
var that = this;
const files = e.target.files;
console.log(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 = xlsx.read(data, {
type: 'binary'
});
const wsname = workbook.sheetnames[0];//取第一张表
const ws = xlsx.utils.sheet_to_json(workbook.sheets[wsname]);//生成json表格内容
console.log(ws);
that.outputs = [];//清空接收数据
for(var i= 0;i
var sheetdata = {
address: ws[i].addr,
value: ws[i].value
}
that.outputs.push(sheetdata);
}
this.$refs.upload.value = '';
} catch (e) {
return false;
}
};
filereader.readasbinarystring(files[0]);
}
},
输出结果示例(outputs)：
[{
addr:'abcadadadad',
value:0.001
},
{
addr:'abcadadadad',
value:0.001
}]
注意：
excel的第一行必须是对应的键值，比如：
addr
value
abcadadadad
0.001
abcadadadad
0.001
总结
以上是凯发k8官方网为你收集整理的vue 导入excel解析_【vue 笔记】vue 读取excel数据并生成数组的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：