JavaScript實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel的示例代碼
Excel導(dǎo)入
先下包(xlsx)
npm i xlsx
把數(shù)組里面中文的鍵修改成英文的鍵:
原因:因?yàn)橹形牡逆I后臺(tái)不認(rèn)識(shí),只能修改成英文的鍵
實(shí)現(xiàn)方式1
success({ hearder, results }) { const userRelations = { 入職日期: "timeOfEntry", 手機(jī)號(hào): "mobile", 姓名: "username", 轉(zhuǎn)正日期: "correctionTime", 工號(hào): "workNumber", }; var arr=[] results.forEach(item=>{ var userInfo={} Object.keys(item).forEach(key=>{ // 現(xiàn)在 key 是中文 userInfo[userRelations[key]]=item[key] // 將原來(lái)中文對(duì)應(yīng)的值 賦值給原來(lái)英文對(duì)應(yīng)的值 }) // item 是原來(lái)數(shù)據(jù)結(jié)構(gòu) 中文 arr.push(userInfo) }) }
實(shí)現(xiàn)方式2
var newArr = results.map((item) => { var userInfo = {}; Object.keys(item).forEach((key) => { userInfo[userRelations[key]] = item[key]; // 將原來(lái)中文對(duì)應(yīng)的值 賦值給原來(lái)英文對(duì)應(yīng)的值 }); return userInfo; });
轉(zhuǎn)化Excel日期格式:
var newArr = results.map((item) => { var userInfo = {}; Object.keys(item).forEach((key) => { if ( userRelations[key] === "timeOfEntry" || userRelations[key] === "correctionTime" ) { //因?yàn)楹蠖私涌?限制了不能是字符串 要求轉(zhuǎn)換時(shí)間類(lèi)型,不然會(huì)變成 NAN userInfo[userRelations[key]] = new Date( this.formatDate(item[key], "/")// 只有這樣才能存入數(shù)據(jù)庫(kù) ); } else { userInfo[userRelations[key]] = item[key]; // 將原來(lái)中文對(duì)應(yīng)的值 賦值給原來(lái)英文對(duì)應(yīng)的值 } }); return userInfo; }); formatDate(numb, format) { // 代碼是 copy 的,邏輯不用明白 const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) const year = time.getFullYear() + '' const month = time.getMonth() + 1 + '' const date = time.getDate() - 1 + '' if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) }
Excel導(dǎo)出
先下包(xlsx file-saver、script-loader(負(fù)責(zé)懶加載))
npm install script-loader -S -D
npm install xlsx file-saver -S
然后把兩個(gè)文件給引到src目錄下 Export2Excel.js Export2Zip.js
exportData() { const headers = { 姓名: "username", 手機(jī)號(hào): "mobile", 入職日期: "timeOfEntry", 聘用形式: "formOfEmployment", 轉(zhuǎn)正日期: "correctionTime", 工號(hào): "workNumber", 部門(mén): "departmentName", }; import("@/vendor/Export2Excel").then(async (excel) => { const { rows } = await getEmployeeList({ page: 1, size: this.page.total, }); const data = this.formatJson(headers, rows); // 返回的data就是要導(dǎo)出的結(jié)構(gòu) excel.export_json_to_excel({ header: Object.keys(headers), data, }); }); }, formatJson(headers, rows) { // 首先遍歷數(shù)組 return rows.map((item) => { // item是一個(gè)對(duì)象 {mobile:13213,username:'張三'} return Object.keys(headers).map((key) => { if ( headers[key] === "timeOfEntry" || headers[key] === "correctionTime" ) { // 格式化日期 return formatDate(item[headers[key]]); } else if (headers[key] === "formOfEmployment") { const obj = EmployeeEnum.hireType.find( (obj) => obj.id === item[headers[key]] ); return obj ? obj.value : "未知"; } return item[headers[key]]; }); }); },
Excel表格合并
const multiHeader = [["姓名", "主要信息", "", "", "", "", "部門(mén)"]]; const merges = ["A1:A2", "B1:F1", "G1:G2"]; // 要合并Excel的表格,從多少到多少 excel.export_json_to_excel({ header: Object.keys(headers), data, filename: "員工資料表", multiHeader, // 復(fù)雜表頭 merges, // 合并選項(xiàng) });
需要引入的代碼文件:(代碼無(wú)需理解,copy就行)
Export2Excel.js代碼:
/* eslint-disable */ import { saveAs } from 'file-saver' import XLSX from 'xlsx' function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = []; for (var R = 0; R < rows.length; ++R) { var outRow = []; var row = rows[R]; var columns = row.querySelectorAll('td'); for (var C = 0; C < columns.length; ++C) { var cell = columns[C]; var colspan = cell.getAttribute('colspan'); var rowspan = cell.getAttribute('rowspan'); var cellValue = cell.innerText; if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue; //Skip ranges ranges.forEach(function (range) { if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); } }); //Handle Row Span if (rowspan || colspan) { rowspan = rowspan || 1; colspan = colspan || 1; ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 } }); }; //Handle Value outRow.push(cellValue !== "" ? cellValue : null); //Handle Colspan if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null); } out.push(outRow); } return [out, ranges]; }; function datenum(v, date1904) { if (date1904) v += 1462; var epoch = Date.parse(v); return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); } function sheet_from_array_of_arrays(data, opts) { var ws = {}; var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }; for (var R = 0; R != data.length; ++R) { for (var C = 0; C != data[R].length; ++C) { if (range.s.r > R) range.s.r = R; if (range.s.c > C) range.s.c = C; if (range.e.r < R) range.e.r = R; if (range.e.c < C) range.e.c = C; var cell = { v: data[R][C] }; if (cell.v == null) continue; var cell_ref = XLSX.utils.encode_cell({ c: C, r: R }); if (typeof cell.v === 'number') cell.t = 'n'; else if (typeof cell.v === 'boolean') cell.t = 'b'; else if (cell.v instanceof Date) { cell.t = 'n'; cell.z = XLSX.SSF._table[14]; cell.v = datenum(cell.v); } else cell.t = 's'; ws[cell_ref] = cell; } } if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); return ws; } function Workbook() { if (!(this instanceof Workbook)) return new Workbook(); this.SheetNames = []; this.Sheets = {}; } 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; } export function export_table_to_excel(id) { var theTable = document.getElementById(id); var oo = generateArray(theTable); var ranges = oo[1]; /* original data */ var data = oo[0]; var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); /* add ranges to worksheet */ // ws['!cols'] = ['apple', 'banan']; ws['!merges'] = ranges; /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "test.xlsx") } export function export_json_to_excel({ multiHeader = [], header, data, filename, merges = [], autoWidth = true, bookType = 'xlsx' } = {}) { /* original data */ filename = filename || 'excel-list' data = [...data] data.unshift(header); for (let i = multiHeader.length - 1; i > -1; i--) { data.unshift(multiHeader[i]) } var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); if (merges.length > 0) { if (!ws['!merges']) ws['!merges'] = []; merges.forEach(item => { ws['!merges'].push(XLSX.utils.decode_range(item)) }) } if (autoWidth) { /*設(shè)置worksheet每列的最大寬度*/ const colWidth = data.map(row => row.map(val => { /*先判斷是否為null/undefined*/ if (val == null) { return { 'wch': 10 }; } /*再判斷是否為中文*/ else if (val.toString().charCodeAt(0) > 255) { return { 'wch': val.toString().length * 2 }; } else { return { 'wch': val.toString().length }; } })) /*以第一行為初始值*/ let result = colWidth[0]; for (let i = 1; i < colWidth.length; i++) { for (let j = 0; j < colWidth[i].length; j++) { if (result[j]['wch'] < colWidth[i][j]['wch']) { result[j]['wch'] = colWidth[i][j]['wch']; } } } ws['!cols'] = result; } /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, { bookType: bookType, bookSST: false, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`); }
?Export2Zip.js代碼:
/* eslint-disable */ import { saveAs } from 'file-saver' import JSZip from 'jszip' export function export_txt_to_zip(th, jsonData, txtName, zipName) { const zip = new JSZip() const txt_name = txtName || 'file' const zip_name = zipName || 'file' const data = jsonData let txtData = `${th}\r\n` data.forEach((row) => { let tempStr = '' tempStr = row.toString() txtData += `${tempStr}\r\n` }) zip.file(`${txt_name}.txt`, txtData) zip.generateAsync({ type: "blob" }).then((blob) => { saveAs(blob, `${zip_name}.zip`) }, (err) => { alert('導(dǎo)出失敗') }) }
以上就是JavaScript實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JavaScript導(dǎo)入導(dǎo)出excel的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法
這篇文章主要介紹了JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法,涉及javascript窗口操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03uniapp實(shí)現(xiàn)人臉識(shí)別功能詳細(xì)示例
這次使用uni-app框架開(kāi)發(fā)一個(gè)小程序,有一個(gè)刷臉功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)人臉識(shí)別功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10javascript中onmouse事件在div中失效問(wèn)題的解決方法
我們預(yù)期只有當(dāng)鼠標(biāo)從div中移開(kāi)的時(shí)候才會(huì)觸發(fā)onmouseout事件,可事實(shí)上,當(dāng)我們移到div中的元素時(shí),例如:本例中的a標(biāo)簽時(shí),就會(huì)觸發(fā) onmousout事件2012-01-01js實(shí)現(xiàn)倒計(jì)時(shí)及時(shí)間對(duì)象
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)效果及時(shí)間對(duì)象,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11詳解微信小程序開(kāi)發(fā)之formId使用(模板消息)
這篇文章主要介紹了詳解微信小程序開(kāi)發(fā)之formId使用(模板消息),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Bootstrap CSS組件之導(dǎo)航條(navbar)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之導(dǎo)航條(navbar),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js 獲取元素的具體樣式信息getcss(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js 獲取元素的具體樣式信息getcss(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07