因為需求需要讀取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数据并生成数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。