欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js使用xlsx讀取excel文件的詳細(xì)步驟

 更新時(shí)間:2022年09月05日 14:39:46   作者:茯神_fushen  
讀取excel文件是日常開發(fā)中經(jīng)常會(huì)遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于js使用xlsx讀取excel文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(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 解析異常的解決方法

    使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。
    2011-04-04
  • JS計(jì)算網(wǎng)頁停留時(shí)間代碼

    JS計(jì)算網(wǎng)頁停留時(shí)間代碼

    這篇文章主要介紹了JS計(jì)算網(wǎng)頁停留時(shí)間的具體實(shí)現(xiàn),需要的朋友可以參考下
    2014-04-04
  • 微信小程序?qū)崿F(xiàn)的五星評(píng)價(jià)功能示例

    微信小程序?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-04
  • 微信小程序自定義彈框效果

    微信小程序自定義彈框效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序自定義彈框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • TypeScript快速上手語法及結(jié)合vue3用法詳解

    TypeScript快速上手語法及結(jié)合vue3用法詳解

    TypeScript是一種由微軟開發(fā)的自由開源的編程語言,主要提供了類型系統(tǒng)和對(duì)ES6的支持,下面這篇文章主要給大家介紹了關(guān)于TypeScript快速上手語法及結(jié)合vue3用法的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • JavaScript的異步ajax詳解

    JavaScript的異步ajax詳解

    篇文章主要為大家詳細(xì)介紹了JavaScript?異步ajax,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下嗎,希望能夠給你帶來幫助
    2022-03-03
  • JS 獲取瀏覽器和屏幕寬高等信息的實(shí)現(xiàn)思路及代碼

    JS 獲取瀏覽器和屏幕寬高等信息的實(shí)現(xiàn)思路及代碼

    本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性,附實(shí)現(xiàn)代碼及源程序解決,有需求的朋友可以參考下
    2013-07-07
  • 分享自己用JS做的掃雷小游戲

    分享自己用JS做的掃雷小游戲

    引用了jQuery,節(jié)省了很多鼠標(biāo)點(diǎn)擊上的判斷。界面顯然都是照搬Windows的掃雷啦,詳細(xì)的內(nèi)容注釋里都有,感興趣的朋友參考下吧
    2016-02-02
  • js+canvas繪制圖形驗(yàn)證碼

    js+canvas繪制圖形驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了js+canvas繪制圖形驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JavaScript頁面實(shí)時(shí)顯示當(dāng)前時(shí)間實(shí)例代碼

    JavaScript頁面實(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

最新評(píng)論