摘要:介紹最近項目中讓實現一個導入導出的功能,查找了一些插件后發現這個插件,所以就嘗試使用了一下,這里將使用方法和遇到的問題簡單記錄一下。
介紹
最近項目中讓實現一個導入導出Excel的功能,查找了一些插件后發現js-xlsx這個插件,所以就嘗試使用了一下,這里將使用方法和遇到的問題簡單記錄一下。
SheetJS js-xlsx 是一款能夠讀寫多種格式表格的插件,瀏覽器支持良好,并且能在多個語言平臺上使用,目前在 github 上有 14k 個 star。
插件地址:https://github.com/SheetJS/js...
1.安裝依賴
進入項目文件夾,安裝 xlsx
yarn add xlsx
2.在項目中引入
import * as XLSX from "xlsx"導出Excel功能實現
1.定義導出時需要使用的方法
export default function download(json,fileName){ const type = "xlsx"http://定義導出文件的格式 var tmpDown;//導出的內容 var tmpdata = json[0]; json.unshift({}); var keyMap = []; //獲取keys for (var k in tmpdata) { keyMap.push(k); json[0][k] = k; } var tmpdata = [];//用來保存轉換好的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); //設置區域,比如表格從A1到D10 var tmpWB = { SheetNames: ["mySheet"], //保存的表標題 Sheets: { "mySheet": Object.assign({}, tmpdata, //內容 { "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1] //設置填充區域 }) } }; tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {bookType: (type == undefined ? "xlsx":type),bookSST: false, type: "binary"}//這里的數據是用來定義導出的格式類型 ))], { type: "" }); //創建二進制對象寫入轉換好的字節流 saveAs(tmpDown,fileName); } function saveAs(obj, fileName){//導出功能實現 var tmpa = document.createElement("a"); tmpa.download = fileName || "下載"; tmpa.href = URL.createObjectURL(obj); //綁定a標簽 tmpa.click(); //模擬點擊實現下載 setTimeout(function () { //延時釋放 URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL }, 100); } function s2ab(s){ //字符串轉字符流 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.項目中使用導出方法
//導出excel //導出excel downloadExl = () => { const { results } = this.props //需要導出的json數據 let datas = _.clone(results)//這里為了不影響項目的數據的使用 采用了lodash中的深克隆方法 let json = datas.map(item=> { //將json數據的鍵名更換成導出時需要的鍵名 return { "人員ID" :item.id, "姓名" : item.name, "證件類型": this.findIdType(item.idType),//將類型代號轉為漢字 "證件號碼": item.credentialsId, "固定電話": item.tel, "移動電話": item.mobile } }) download(json,"人員信息.xlsx")//導出的文件名 }
3.綁定事件
這樣就能輕松實現Excel的導出功能了
導入Excel功能實現1.定義導入時需要使用的方法
//導入excel onImportExcel = file => { // 獲取上傳的文件對象 const { files } = file.target; // 通過FileReader對象讀取文件 const fileReader = new FileReader(); fileReader.onload = event => { try { const { result } = event.target; // 以二進制流方式讀取得到整份excel表格對象 const workbook = XLSX.read(result, { type: "binary" }); // 存儲獲取到的數據 let data = []; // 遍歷每張工作表進行讀取(這里默認只讀取第一張表) for (const sheet in workbook.Sheets) { // esline-disable-next-line if (workbook.Sheets.hasOwnProperty(sheet)) { // 利用 sheet_to_json 方法將 excel 轉成 json 數據 data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); // break; // 如果只取第一張表,就取消注釋這行 } } // 最終獲取到并且格式化后的 json 數據 const uploadData = data.map(item=> { return { id : Number(item["人員ID"]), name : item["姓名"], idType: this.findIdType(item["證件類型"],"string"), credentialsId: item["證件號碼"], tel: item["固定電話"], mobile: item["移動電話"] } }) console.log(uploadData)//這里得到了后端需要的json數據,調用接口傳給后端就行了 message.success("上傳成功!") //這里用了antd中的message組件 } catch (e) { // 這里可以拋出文件類型錯誤不正確的相關提示 message.error("文件類型不正確!"); } }; // 以二進制方式打開文件 fileReader.readAsBinaryString(files[0]); }
2.綁定事件
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.針對文件上傳和讀取結果分別做了對應的提示(這里使用 ant design 中的 message 組件)
5.得到的json數據
導入導出功能就這樣實現了,是不是很簡單。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/101350.html
摘要:而作為一款深受用戶喜愛的電子表格工具,借助其直觀的界面出色的計算性能和圖表工具,已經成為數據統計領域不可或缺的軟件之一。使用實現的導入和導出通過純,您完全可以實現導入和導出文件功能,并為最終用戶提供與這些文件進行交互的界面。 JavaScript是一個涵蓋多種框架、直譯式、可以輕松自定義客戶端的腳本語言,在 Web 應用程序中,更加易于編碼和維護。而Excel 作為一款深受用戶喜愛的電...
摘要:使用時,前端可以將后端返回的數據拼接成自己需要導出的格式,下載到電腦中,完全不依賴后端。 前言 github: https://github.com/stardew516... 以往做excel表格下載功能的時候,都是后端生成好表格后,存儲在某個地方,然后給前端一個鏈接,前端使用a標簽加download下載,或者使用node。其實純前端也是可以做表格下載的,有一個很好用的javascr...
摘要:前言業務場景由前臺導入表格,獲取批量數據。根據一個數組導出表格。每一個值是個對象,包含了兩個屬性。由于本人將和放到了同一級,這里引入是這樣的。這幾個文件不支持引入,所以需要來將他們掛載到全局環境下。若不足之處,歡迎大家指出,共勉。 1 前言 1.1 業務場景 由前臺導入Excel表格,獲取批量數據。 根據一個數組導出Excel表格。 2 實現原理 2.1 引入工具庫 file-save...
摘要:葡萄城的是一個基于技術的純控件,控件性能流暢,有類似的在線表格編輯器,適合非專業程序員設計報表模板,很符合平臺部分無編碼開發的理念。葡萄城控件產品對于項目的價值控件主要用于本項目中的報表設計,展示,打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 華閩通達 - R 平臺應用所使用產品:SpreadJS ...
閱讀 2485·2023-04-25 21:41
閱讀 1656·2021-09-22 15:17
閱讀 1928·2021-09-22 10:02
閱讀 2442·2021-09-10 11:21
閱讀 2585·2019-08-30 15:53
閱讀 1003·2019-08-30 15:44
閱讀 957·2019-08-30 13:46
閱讀 1145·2019-08-29 18:36