您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)前端實(shí)現(xiàn)Excel導(dǎo)入和導(dǎo)出功能的方法,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
最近項(xiàng)目中讓實(shí)現(xiàn)一個(gè)導(dǎo)入導(dǎo)出Excel的功能,查找了一些插件后發(fā)現(xiàn)js-xlsx這個(gè)插件,所以就嘗試使用了一下,這里將使用方法和遇到的問題簡單記錄一下。
SheetJS js-xlsx 是一款能夠讀寫多種格式表格的插件,瀏覽器支持良好,并且能在多個(gè)語言平臺(tái)上使用,目前在 github 上有 14k 個(gè) star。
插件地址:https://github.com/SheetJS/js...
使用
1.安裝依賴
進(jìn)入項(xiàng)目文件夾,安裝 xlsx
yarn add xlsx
2.在項(xiàng)目中引入
import * as XLSX from 'xlsx'
導(dǎo)出Excel功能實(shí)現(xiàn)
1.定義導(dǎo)出時(shí)需要使用的方法
export default function download(json,fileName){ const type = 'xlsx'//定義導(dǎo)出文件的格式 var tmpDown;//導(dǎo)出的內(nèi)容 var tmpdata = json[0]; json.unshift({}); var keyMap = []; //獲取keys for (var k in tmpdata) { keyMap.push(k); json[0][k] = k; } var tmpdata = [];//用來保存轉(zhuǎn)換好的json json.map((v, i) => keyMap.map((k, j) => Object.assign({}, { v: v[k], position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1) }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = { v: v.v }); var outputPos = Object.keys(tmpdata); //設(shè)置區(qū)域,比如表格從A1到D10 var tmpWB = { SheetNames: ['mySheet'], //保存的表標(biāo)題 Sheets: { 'mySheet': Object.assign({}, tmpdata, //內(nèi)容 { '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設(shè)置填充區(qū)域 }) } }; tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//這里的數(shù)據(jù)是用來定義導(dǎo)出的格式類型 ))], { type: "" }); //創(chuàng)建二進(jìn)制對(duì)象寫入轉(zhuǎn)換好的字節(jié)流 saveAs(tmpDown,fileName); } function saveAs(obj, fileName){//導(dǎo)出功能實(shí)現(xiàn) var tmpa = document.createElement("a"); tmpa.download = fileName || "下載"; tmpa.href = URL.createObjectURL(obj); //綁定a標(biāo)簽 tmpa.click(); //模擬點(diǎn)擊實(shí)現(xiàn)下載 setTimeout(function () { //延時(shí)釋放 URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個(gè)object URL }, 100); } function s2ab(s){ //字符串轉(zhuǎn)字符流 var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } function getCharCol(n){ let temCol = '', s = '', m = 0 while (n > 0) { m = n % 26 + 1 s = String.fromCharCode(m + 64) + s n = (n - m) / 26 } return s }
2.項(xiàng)目中使用導(dǎo)出方法
//導(dǎo)出excel //導(dǎo)出excel downloadExl = () => { const { results } = this.props //需要導(dǎo)出的json數(shù)據(jù) let datas = _.clone(results)//這里為了不影響項(xiàng)目的數(shù)據(jù)的使用 采用了lodash中的深克隆方法 let json = datas.map(item=> { //將json數(shù)據(jù)的鍵名更換成導(dǎo)出時(shí)需要的鍵名 return { '人員ID' :item.id, '姓名' : item.name, '證件類型': this.findIdType(item.idType),//將類型代號(hào)轉(zhuǎn)為漢字 '證件號(hào)碼': item.credentialsId, '固定電話': item.tel, '移動(dòng)電話': item.mobile } }) download(json,'人員信息.xlsx')//導(dǎo)出的文件名 }
3.綁定事件
<Button onClick={this.downloadExl}>導(dǎo)出Excel</Button>
這樣就能輕松實(shí)現(xiàn)Excel的導(dǎo)出功能了
1.定義導(dǎo)入時(shí)需要使用的方法
//導(dǎo)入excel onImportExcel = file => { // 獲取上傳的文件對(duì)象 const { files } = file.target; // 通過FileReader對(duì)象讀取文件 const fileReader = new FileReader(); fileReader.onload = event => { try { const { result } = event.target; // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象 const workbook = XLSX.read(result, { type: 'binary' }); // 存儲(chǔ)獲取到的數(shù)據(jù) let data = []; // 遍歷每張工作表進(jìn)行讀?。ㄟ@里默認(rèn)只讀取第一張表) for (const sheet in workbook.Sheets) { // esline-disable-next-line if (workbook.Sheets.hasOwnProperty(sheet)) { // 利用 sheet_to_json 方法將 excel 轉(zhuǎn)成 json 數(shù)據(jù) data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); // break; // 如果只取第一張表,就取消注釋這行 } } // 最終獲取到并且格式化后的 json 數(shù)據(jù) const uploadData = data.map(item=> { return { id : Number(item['人員ID']), name : item['姓名'], idType: this.findIdType(item['證件類型'],'string'), credentialsId: item['證件號(hào)碼'], tel: item['固定電話'], mobile: item['移動(dòng)電話'] } }) console.log(uploadData)//這里得到了后端需要的json數(shù)據(jù),調(diào)用接口傳給后端就行了 message.success('上傳成功!') //這里用了antd中的message組件 } catch (e) { // 這里可以拋出文件類型錯(cuò)誤不正確的相關(guān)提示 message.error('文件類型不正確!'); } }; // 以二進(jìn)制方式打開文件 fileReader.readAsBinaryString(files[0]); }
2.綁定事件
<Button className={Styles.upload_wrap}> 導(dǎo)入Excel <input className={Styles.file_uploader} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} /> //這里對(duì)原有的input樣式進(jìn)行了修改,accept 屬性定義了上傳文件支持的類型,onChange 操作中的 importExcel 方法定義了上傳文件時(shí)執(zhí)行的操作。 </Button>
3.修改樣式
.upload_wrap { display: inline-block; position: relative; width: 94px; padding: 3px 5px; overflow: hidden; } .file_uploader { position: absolute; width: 100%; height: 100%; top: 0; left: 0; outline: none; opacity: 0; background-color: transparent; } .upload_text { display: inline-block; margin-left: 5px; } .upload_tip { display: inline-block; margin-left: 10px; color: #999; }
4.針對(duì)文件上傳和讀取結(jié)果分別做了對(duì)應(yīng)的提示(這里使用 ant design 中的 message 組件)
5.得到的json數(shù)據(jù)
導(dǎo)入導(dǎo)出功能就這樣實(shí)現(xiàn)了,是不是很簡單。
關(guān)于前端實(shí)現(xiàn)Excel導(dǎo)入和導(dǎo)出功能的方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。