使用的庫js-xlsx?純JS即可讀取和導出excel的工具庫https://github.com/SheetJS/js-xlsx

安裝

直接下載dist目錄下有很多個JS文件，一般情況下用xlsx.core.min.js就夠了，xlsx.full.min.js則是包含了所有功能模塊。直接通過script引用即可。

npm安裝??npm install xlsx

在main.js中引引入?import?XLSX?from?"xlsx/dist/xlsx.full.min";

在所需頁面引入? import?XLSX?from?"xlsx";

使用

這里使用的是element組件

accept=".xlsx"

:auto-upload="false"

:show-file-list="false"

:on-change="uploadChg"

>

導入

readWorkbookFromLocalFile(file, callback) {

// console.log('file', file)

let reader = new FileReader();

// onload 文件讀取成功完成時觸發

reader.onload = function(e) {

let data = e.target.result;

// 讀取excel主要是通過XLSX.read(data, {type: type});方法來實現

// binary: BinaryString格式(byte n is data.charCodeAt(n)); 日期格式需要加上 cellDates: true 參數

let workbook = XLSX.read(data, { type: "binary", cellDates: true });

if (callback) callback(workbook);

};

// readAsBinaryString file 將文件讀取為二進制碼

reader.readAsBinaryString(file);

}

// 導入

uploadChg(file) {

console.log(file);

this.readWorkbookFromLocalFile(file.raw, workbooks => {

console.log("workbooks", workbooks);

let sheetNames = workbooks.SheetNames;

let worksheet = workbooks.Sheets[sheetNames[0]]; // 取第一張表

// sheet_to_json 輸出json格式

// defval: "" 值為空時 key缺失

const dataJson = XLSX.utils.sheet_to_json(worksheet, {

row: false,

defval: ""

});

this.tableTitle = [];

for (let i in dataJson[0]) {

this.tableTitle.push(i); // 表頭

}

console.log("tableTitle", this.tableTitle);

console.log("dataJson", dataJson);

// !merges s: 開始 e: 結束 r: 行 c: 列

if (worksheet["!merges"]) {

let temp = [];

worksheet["!merges"].forEach(item => {

let colspan =

item.e.r - item.s.r === 0 ? 1 : item.e.r - item.s.r + 1;

let rowspan =

item.e.c - item.s.c === 0 ? 1 : item.e.c - item.s.c + 1;

let a = { row: item.s.r - 1, colspan: colspan, rowspan: rowspan };

temp.push(a);

});

console.log("temp", temp);

temp.forEach(o => {

Object.assign(dataJson[o.row], o);

});

console.log("dataJson", dataJson);

this.tableData = dataJson;

} else {

this.tableData = dataJson;

}

});

}

{{ o }}

{{ item[o] }}

總結

以上是生活随笔為你收集整理的vue导入excel进度条_在vue中导入Excel表的全部內容，希望文章能夠幫你解決所遇到的問題。

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