vue實現(xiàn)excel表格的導入導出的示例
更新時間:2023年04月11日 09:50:31 作者:filter忠實信徒
本文主要介紹了vue實現(xiàn)excel表格的導入導出的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一、下載xlsx插件
npm i xlsx
二、通過element-ui組件的upload組件上傳文件
<el-upload class="upload-demo" action //必選參數(shù),上傳的地址,這里我們不寫地址自定義上傳 accept=".xlsx,.xls" //文件類型 :auto-upload="false" //是否在選取文件后立即進行上傳 :show-file-list="false" //是否顯示已上傳文件列表 :on-change="handleChange" //文件狀態(tài)改變時的鉤子,添加文件、上傳成功和上傳失敗時都會被調用 > <el-button type="primary">選擇文件</el-button> </el-upload>
三、把選擇的Excel文件把文件內容轉化為二進制
//把二進制文件進行讀取 export function readFile(file) { return new Promise((resolve, reject) => { // FileReader主要用于將文件內容讀入內存,通過一系列異步接口,可以在主線程中訪問本地文件. let reader = new FileReader(); // 異步按字節(jié)讀取文件內容,結果為文件的二進制串 reader.readAsBinaryString(file); reader.onload = (ev) => { resolve(ev.target.result); }; }); }
四、通過插件中的xlsx.read()讀取二進制數(shù)據(jù)
//選擇文件 const handleChange = async function (e) { const file = e.raw; //選擇的文件內容 let data = await readFile(file); //將內容轉化為二進制 let workbook = xlsx.read(data, { type: "binary" }); //通過插件讀取二進制數(shù)據(jù) binary二進制 }
五、通過xlsx.utils.sheet_to_json()把表格一中的數(shù)據(jù)轉化為JSON格式
//表格目錄一中的數(shù)據(jù) let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //把數(shù)據(jù)轉化為json數(shù)據(jù)格式 data = xlsx.utils.sheet_to_json(worksheet);
六、把讀取的JSON數(shù)據(jù)轉化為可以傳遞給服務器的數(shù)據(jù)
//把讀取的數(shù)據(jù)變?yōu)樽詈罂梢詡鬟f給服務器的數(shù)據(jù)(所在地=>address,學校名稱=>shcoolName......) let arr = []; data.forEach((item) => { let obj = {}; for (let key in character) { // hasOwnProperty() 方法會返回一個布爾值,指示對象自身屬性中是否具有指定的屬性(也就是,是否有指定的鍵) // 即使屬性的值是 null 或 undefined,只要屬性存在,hasOwnProperty 依舊會返回 true。 // 判斷是否有規(guī)定的屬性沒有就終止執(zhí)行 if (!character.hasOwnProperty(key)) break; let v = character[key], text = v.text, type = v.type; v = item[text] || ""; //將數(shù)據(jù)轉化為對應的數(shù)據(jù)類型 不符合的話不做操作 type === "string" ? (v = String(v)) : null; type === "number" ? (v = Number(v)) : null; obj[key] = v; } arr.push(obj); }); //給用戶一點延遲 await delay(100); //將導入數(shù)據(jù)展示到頁面中 result.tableData = arr;
導出
// 1.把數(shù)據(jù)轉化為表格名稱對應 let arr = result.tableData.map((item) => { return { 辦學層次: item.levels, 備注: item.message, 學校名稱: item.schoolName, 所在地: item.address, }; }); //2.用于將 JSON 數(shù)據(jù)轉換為 Excel 工作表中的單元格數(shù)據(jù)。 let sheet = xlsx.utils.json_to_sheet(arr); //3.用于創(chuàng)建一個新的 Excel 工作簿對象它返回一個空白的工作簿,可以向其中添加工作表和單元格數(shù)據(jù)。 let book = xlsx.utils.book_new(); //4.用于向現(xiàn)有的 Excel 工作簿對象(Workbook)中添加一個新的工作表 // book_append_sheet(wb, sheet, name=None) //參數(shù)wb是要將工作表添加到的 Workbook 對象;sheet 參數(shù)是要添加的 Worksheet 對象;name 參數(shù)是要為工作表指定的名稱(如果未指定,則使用默認名稱) xlsx.utils.book_append_sheet(book, sheet, "sheet1"); //5.用于將 Excel 工作簿下載到本地文件系統(tǒng)中 book要下載的Eceial表格,第二個參數(shù)是表格名稱 xlsx.writeFile(book, `user${new Date().getTime()}.xls`);
到此這篇關于vue實現(xiàn)excel表格的導入導出的示例的文章就介紹到這了,更多相關vue excel導入導出內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue element 中的table動態(tài)渲染實現(xiàn)(動態(tài)表頭)
這篇文章主要介紹了vue element 中的table動態(tài)渲染實現(xiàn)(動態(tài)表頭),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11vue2 中如何實現(xiàn)動態(tài)表單增刪改查實例
本篇文章主要介紹了vue2 中如何實現(xiàn)動態(tài)表單增刪改查實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06vue鼠標hover(懸停)改變background-color移入變色問題
這篇文章主要介紹了vue鼠標hover(懸停)改變background-color移入變色問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue2如何使用vue-i18n搭建多語言切換環(huán)境
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧2023-12-12