前端匯出excel資料-jsonToExcel
咳咳,好久沒有寫博了。。。
在工作中遇到了純前端,將資料匯出為excel檔案。正文開始:
第一步 安裝依賴:
npm i xlsx
第二步 寫匯出函式:
import XLSX from 'xlsx' const exportJsonToExcel = (dataArr) => { const now = new Date() const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//這裡的資料是用來定義匯出的格式型別 const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} }; wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataArr);//通過json_to_sheet轉成單頁(Sheet)資料 saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), `匯出檔案-${now.getFullYear()}${now.getMonth() + 1}${now.getDate()}.${wopts.bookType}`); } // 匯出excel const saveAs = (obj, fileName) => { var tmpa = document.createElement("a"); tmpa.download = fileName || "下載"; const href = URL.createObjectURL(obj); //繫結a標籤 tmpa.href = href; tmpa.click(); //模擬點選實現下載 setTimeout(function () { //延時釋放 URL.revokeObjectURL(href); //用URL.revokeObjectURL()來釋放這個object URL }, 100); } const s2ab = (s) => { if (typeof ArrayBuffer !== 'undefined') { 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; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } } export default exportJsonToExcel
第三步 呼叫exportJsonToExcel方法:
// 處理下載按鈕, 少於1000條,則前端下載 handleClickDownload = () => { exportToExcel(data) } // 其中傳入給exportToExcel的資料格式如下:是一個物件的陣列,一個物件是一行的資料,key是表頭, value是資料 data = [{'聯絡電話':item.Tel, '客戶標籤':item.CustomerLableValue, '客戶狀態':item.StateValue, '距上次跟進(天)':item.OutTrackDay, '客戶來源':item.SourceValue, '業務員':item.SalesmanName, '省份':item.ProvinceName, '城市':item.CityName, '區縣':item.CountyName, '學歷':item.EducationName, '性別':item.Gender == 0 ? '男':'女', '政治面貌':item.PoliticalOutlookName, 'QQ':item.QQ, '型別':item.Type==1?'個人客戶':'企業客戶', '聯絡次數':item.ContactNum, '微信':item.WeChat, '錯誤資訊': item.ErrorInfo }]
小結:
第三步的呼叫非常簡單,將想要匯出的資料格式化一下,傳給exportToExcel方法即可。想哪裡呼叫都可以呦。
第二步,讓我新學習了兩個方法: URL.createObjectURL() 和 URL.revokeObjectURL() ;
objectURL = URL.createObjectURL(blob):靜態方法建立一個字串,包含blob的url。這個新的url表示指定的File物件或者Blob物件。
每次呼叫這個方法時候,都會建立一個新的URL物件,即便使用的是相同的引數,因此,需要使用 URL.revokeObjectURL() 來釋放。
URL.revokeObjectURL( objectURL ): 釋放需要在使用後釋放,如果在使用前釋放,則objectURL就為undefined。 舉栗子:
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta charset="UTF-8"> <title>test url</title> </head> <body> <p>test revoke before use</p> <input type="file" id="test" /> <br /> <br /> <br /> <p>test use revoke use</p> <input type="file" id="test3" /> <script> $('#test').on('change', function (e) { var newImg = document.createElement("img"); var url = URL.createObjectURL(e.target.files[0]) console.log(url); newImg.src = url; URL.revokeObjectURL(url); // 這裡釋放了!沒有圖片 document.body.appendChild(newImg); console.log(url); }); $('#test3').on('change', function (e) { var newImg = document.createElement("img"); var url = URL.createObjectURL(e.target.files[0]) newImg.src = url; newImg.onload = function () { URL.revokeObjectURL(url); // onload時候釋放,沒有問題,因為已經載入完畢! document.body.appendChild(newImg); } }); </script> </body> </html>