詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件
以將此Excel導(dǎo)出為json數(shù)據(jù)為例

一、安裝依賴
npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev
二、template中
<span>導(dǎo)入表格</span> <input id="upload" type="file" @change="importfxx()" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
三、script中js代碼
methods:{
// 處理導(dǎo)入Excel中日期問題
formatDate(numb, format) {
const time = new Date((numb - 1) * 24 * 3600000 + 1);
time.setYear(time.getFullYear() - 70);
const year = time.getFullYear() + "";
const month = time.getMonth() + 1 + "";
const date = time.getDate() - 1 + "";
if (format && format.length === 1) {
return year + format + month + format + date;
}
return (
year +
(month < 10 ? "0" + month : month) +
(date < 10 ? "0" + date : date)
);
},
// 導(dǎo)入Excel
importfxx() {
let _this = this;
let f = event.currentTarget.files[0];
let rABS = false; //是否將文件讀取為二進(jìn)制字符串
let reader = new FileReader();
//if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function (f) {
let binary = "";
let rABS = false; //是否將文件讀取為二進(jìn)制字符串
let wb; //讀取完成的數(shù)據(jù)
let outdata;
let reader = new FileReader();
reader.onload = function (e) {
let bytes = new Uint8Array(reader.result);
let length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
let XLSX = require("xlsx");
if (rABS) {
wb = XLSX.read(btoa(fixdata(binary)), {
//手動(dòng)轉(zhuǎn)化
type: "base64",
});
} else {
wb = XLSX.read(binary, {
type: "binary",
});
}
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的東西
const keyObj = {
序號: "id",
情況跟蹤: "track",
日期: "date",
標(biāo)題: "title",
狀態(tài): "status",
結(jié)果: "result",
預(yù)警: "warning",
};
outdata.forEach((item) => {
// 將中文的鍵名替換成英文的
for (let k in keyObj) {
let newKey = keyObj[k];
if (newKey) {
item[newKey] = item[k];
delete item[k];
}
}
item["date"] = _this.formatDate(item["date"], "-");
});
console.log(outdata);
};
reader.readAsArrayBuffer(f);
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
}如上操作之后,打印結(jié)果是如下

到此這篇關(guān)于詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件的文章就介紹到這了,更多相關(guān)Vue導(dǎo)入Excel文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
vue使用video.js依賴接入視頻流((hls(m3u8)、flv))的示例代碼
這篇文章給大家介紹了vue如和使用video.js依賴接入視頻流((hls(m3u8)、flv)),文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
vue3.0 CLI - 2.1 - component 組件入門教程
這篇文章主要介紹了vue3.0 CLI - 2.1 - component 組件入門教程,本文主要的關(guān)注點(diǎn)就是組件,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-09-09
Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Vue使用Pinia輕松實(shí)現(xiàn)狀態(tài)管理
pinia,一個(gè)基于Vue3的狀態(tài)管理庫,它可以幫助開發(fā)人員管理Vue應(yīng)用程序的狀態(tài),本文主要為大家介紹了Pinia的用法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06

