vue 导入excel解析-凯发ag旗舰厅登录网址下载

因为需求需要读取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

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue 导入excel解析_【vue 笔记】vue 读取excel数据并生成数组的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。