js使用xlsx讀取excel文件的詳細(xì)步驟
下載安裝插件
npm install xlsx or yarn add xlsx
此時(shí),在項(xiàng)目的node_modules文件夾和package.json文件中可以找到xlsx依賴。
文件基礎(chǔ)
獲取文件對(duì)象
我比較推薦使用h5的原生文件上傳項(xiàng)
<input type="file" id="uploadExcel" multiple />
其中multiple
屬性允許上傳多個(gè)文件,通過Ctrl按鍵來實(shí)現(xiàn)。
在選擇文件的過程中,觸發(fā)事件的流程是下面這樣的:
- mousedown
- focus
- mouseup
- click
- blur
- focus
- change
首先觸發(fā)的是鼠標(biāo)按下事件,然后就是焦點(diǎn)到了input上面,然后鼠標(biāo)抬起事件,觸發(fā)click事件,失去焦點(diǎn)以后彈出文件選擇框,選中文件以后觸發(fā)焦點(diǎn),最后觸發(fā)change事件。
所以監(jiān)聽input的文件內(nèi)容變更事件的話,我推薦用change事件去監(jiān)聽。
添加事件監(jiān)聽:
window.document.getElementdById("uploadExcel").addEventListener("change", function(e){ let fileList = e.target.files; })
其中,打印fileList信息,可以發(fā)現(xiàn)fileList是一個(gè)類數(shù)組,由傳入的file對(duì)象組成。每個(gè)file對(duì)象包含一下屬性:
lastModified | Number | 表示最近一次的修改時(shí)間的時(shí)間戳 |
lastModeifiedDate | Object | 表示最后一次修改時(shí)間的Date對(duì)象,可以在其中調(diào)用Date對(duì)象的有關(guān)方法。 |
name | 文件上傳時(shí)的文件名 | |
size | 文件的字節(jié)大小 | |
type | String | 文件的MIME類型 |
weblitRelativePath | 當(dāng)在input上添加webkitdirectory屬性時(shí),可選文件夾,此時(shí)weblitRelativePath表示文件夾中文件的相對(duì)路徑。未加時(shí)為空 |
讀取文件數(shù)據(jù)
首先創(chuàng)建一個(gè)FileReader實(shí)例:
let reader = new FileReader();
FileReader提供了如下方法:
readAsArrayBuffer(file) | 將文件讀取為ArrayBuffer對(duì)象 |
readAsDataURL(file) | 將文件讀取為DataURL,因此可以讀取圖片。 |
readAsText(file, encoding) | 將文件讀取為文本,第二個(gè)參數(shù)是文本的編碼方式,默認(rèn)為utf-8 |
abort() | 終止文件讀取操作 |
注:無論讀取成功或失敗,方法并不會(huì)返回讀取結(jié)果,這一結(jié)果存儲(chǔ)都在result屬性中。 |
FileReader事件:
onabort | 當(dāng)讀取操作被終止時(shí)調(diào)用 |
onerror | 當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用 |
onload | 當(dāng)讀取操作成功完成時(shí)調(diào)用 |
onloaded | 當(dāng)讀取操作完成時(shí)調(diào)用,無論成功或失敗 |
onloadstart | 當(dāng)讀取操作開始時(shí)調(diào)用 |
onprogress | 在讀取數(shù)據(jù)過程中周期性調(diào)用 |
我們使用readAsDataURL(file)來讀取文件數(shù)據(jù),并使用onload事件來輸出讀取成功后result中的數(shù)據(jù):
reader.onload = function(e){ let data = e.target.result; }; reader.readAsDataURL(file);
讀取Excel
通過xlsx獲取workbook
讀取excel主要是通過以下語句實(shí)現(xiàn):
XLSX.read(data, { type: type });
返回一個(gè)叫WordBook的對(duì)象。
其中,這里type的類型要與處理文件時(shí)讀的data一致,F(xiàn)ileReader方法對(duì)應(yīng)的type取值如下:
base64 | 以base64方法讀取 |
binary | BinatyString格式(byte n is data.charCodeAt (n)) |
string | UTF-8編碼的字符串 |
buffer | nodejs Buffer |
array | Uint8Array,8位無符號(hào)數(shù)組 |
file | 文件的路徑(僅nodejs下支持) |
所以,全部代碼如下:
let wb; // 讀取完成的數(shù)據(jù) let rABS = false; // 是否將文件讀取為二進(jìn)制字符串 document.getElementById("excel").addEventListener("change",function (e) { if(!e.target.files) return; var f = e.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; if(rABS) { wb = XLSX.read(btoa(fixdata(data)), {type: 'base64'});//手動(dòng)轉(zhuǎn)化 } else { wb = XLSX.read(data, {type: 'binary'}); } //wb.SheetNames[0]是獲取Sheets中第一個(gè)Sheet的名字 //wb.Sheets[Sheet名]獲取第一個(gè)Sheet的數(shù)據(jù) document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ); }; if(rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);} }); function fixdata(data) { //文件流轉(zhuǎn)BinaryString var o = "", l = 0, w = 10240; for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))); o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o; }
WorkBook介紹
SheetNames保存了所有Sheet的名字
Sheets保存了每個(gè)Sheet的具體內(nèi)容
Sheet Object
每個(gè)sheet Object表示一張表格,通過類似A1這樣的鍵值保存每個(gè)單元格的內(nèi)容。只要不是"!"開頭的都表示普通的cell。特殊cell有:
sheet['!ref'] | 表示所有單元格的范圍,例如A1到F8則記錄為A1: F8 |
sheet[!merges] | 存放單元格合并信息,是一個(gè)數(shù)組。每個(gè)數(shù)組由包含s和e構(gòu)成的對(duì)象組成。s表示start,e表示end,r表示row,c表示col。 |
例如:
sheet1:{ !merge: [ { e: { c: 5, r: 0 }, s: { c: 0, r: 0 } // 表示A1到F1單元格合并 }, { e: { c: 5, r: 9 }, s: { c: 0, r: 9 } // 表示A10到F10單元格合并 } ] }
Cell Object
t | 內(nèi)容類型 | s | String |
n | Number | ||
b | Boolean | ||
d | Date | ||
v | 原始值 |
|
|
f | 公式 | 如:B2 + B3 | |
h | HTML內(nèi)容 |
|
|
w | 格式化后的內(nèi)容 |
|
|
r | 富文本內(nèi)容 |
|
|
...... |
|
|
讀取WorkBook
普通方法:
// 讀取 excel文件 function outputWorkbook(workbook) { var sheetNames = workbook.SheetNames; // 工作表名稱集合 sheetNames.forEach(name => { var worksheet = Workbook.Sheets[name]; // 只能通過工作表名稱來獲取指定工作表 for(var key in worksheet) { // v是讀取單元格的原始值 console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v); } }); }
根據(jù)!ref確定excel的范圍,再根據(jù)!merges確定單元格合并,最后輸出整個(gè)table。插件zi'shen已經(jīng)寫好工具類XLSX.utils給我們用:
sheet_to_html | 轉(zhuǎn)csv會(huì)忽略格式、單元格合并等信息 |
sheet_to_txt |
|
sheet_to_csv | 會(huì)保留單元格合并,但是生成的是HTML代碼,不是<table> |
sheet_to_json |
|
sheet_to_formulae |
|
導(dǎo)出Excel
生成sheet
aoa_to_sheet | 將一個(gè)二維數(shù)組轉(zhuǎn)成sheet |
json_to_sheet | 將由對(duì)象組成的數(shù)組轉(zhuǎn)化成sheet |
table_to_sheet | 將table的dom直接轉(zhuǎn)成sheet |
sheet_add_aoa | 將二維數(shù)組添加到現(xiàn)有工作表中 |
sheet_add_json | 將js對(duì)象數(shù)組添加到現(xiàn)有工作表中 |
- format_cell 生成單元格的文本值(使用數(shù)字格式)
- encode_row / decode_row 在0索引行和1索引行之間轉(zhuǎn)換
- encode_col / decode_col 在0索引的列和列名之間轉(zhuǎn)換
- encode_cell / decode_cell 轉(zhuǎn)換單元格地址
- encode_range / decode_range 轉(zhuǎn)換單元格范圍
總結(jié)
到此這篇關(guān)于js使用xlsx讀取excel文件的文章就介紹到這了,更多相關(guān)js用xlsx讀取excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法
使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。2011-04-04微信小程序?qū)崿F(xiàn)的五星評(píng)價(jià)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評(píng)價(jià)功能,結(jié)合實(shí)例形式分析了微信小程序五星評(píng)價(jià)相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下2019-04-04TypeScript快速上手語法及結(jié)合vue3用法詳解
TypeScript是一種由微軟開發(fā)的自由開源的編程語言,主要提供了類型系統(tǒng)和對(duì)ES6的支持,下面這篇文章主要給大家介紹了關(guān)于TypeScript快速上手語法及結(jié)合vue3用法的相關(guān)資料,需要的朋友可以參考下2024-02-02JS 獲取瀏覽器和屏幕寬高等信息的實(shí)現(xiàn)思路及代碼
本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性,附實(shí)現(xiàn)代碼及源程序解決,有需求的朋友可以參考下2013-07-07JavaScript頁面實(shí)時(shí)顯示當(dāng)前時(shí)間實(shí)例代碼
最近因?yàn)轫?xiàng)目需要,有個(gè)需求是讓實(shí)時(shí)顯示當(dāng)前時(shí)間,然后想想這不簡單嗎,自己就動(dòng)手敲代碼,但是發(fā)現(xiàn)一個(gè)問題,通過getMonth()得到月份,總是會(huì)比當(dāng)前月份少1,深深覺得實(shí)踐出真知啊…之前覺得Date對(duì)象挺簡單的,有很多細(xì)節(jié)都沒有注意。下面這篇文章就給大家詳細(xì)介紹下。2016-10-10