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