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

