vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组
因為需求需要讀取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
總結
以上是生活随笔為你收集整理的vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： selenium 页面经常改变元素_se
- 下一篇： vue中进度条写法_vue组件实现进度条