vue使用Luckysheet插件實現(xiàn)excel導(dǎo)入導(dǎo)出
Luckysheet開發(fā)的excel導(dǎo)入導(dǎo)出庫-Luckyexcel (opens new window)已經(jīng)實現(xiàn)了excel導(dǎo)入功能(目前只支持xslx文件);支持多sheet
- 更新導(dǎo)出邊框問題
- 更新導(dǎo)出類型不同時樣式
導(dǎo)入使用方法(僅限.xlsx文件):
導(dǎo)入文件(僅限.xlsx文件)
npm引入npm install luckyexcel
引入到頁面中import LuckyExcel from ‘luckyexcel’
let file = e.target.files; if (file == null || file.length == 0) { this.$message.warning("文件為空,請重新選擇文件"); return; } let name = file[0].name; let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length - 1]; if (suffix != "xlsx") { this.$message.warning("只支持xlsx文件,請重新選擇"); return; } luckysheet.destroy(); // 先銷毀當(dāng)前容器 LuckyExcel.transformExcelToLucky(file[0], function( exportJson, luckysheetfile ) { if (exportJson.sheets == null || exportJson.sheets.length == 0) { this.$message.warning("讀取excel文件內(nèi)容失敗,目前不支持xls文件!"); return; } luckysheet.create({ container: "容器ID", showinfobar: false, data: exportJson.sheets, title: exportJson.info.name, userInfo: exportJson.info.name.creator }); });
導(dǎo)出使用方法:
導(dǎo)出表格(支持樣式以及多sheet)
目前官方?jīng)]有導(dǎo)出的方法,但是有告知其他兩種方式(XLSXjs和exceljs)能夠?qū)崿F(xiàn)導(dǎo)出,下面使用的插件為exceljs,支持導(dǎo)出樣式(導(dǎo)出圖片以及圖表還沒有實現(xiàn))
引入插件npm install exceljs
實現(xiàn)代碼,我是單獨放在一個文件里面再調(diào)用,代碼如下:
const Excel = require('exceljs') async function exportSheetExcel(luckysheet, name) { // 1.創(chuàng)建工作簿,可以為工作簿添加屬性 const workbook = new Excel.Workbook(); // 2.創(chuàng)建表格,第二個參數(shù)可以配置創(chuàng)建什么樣的工作表 luckysheet.every(function (table) { if (table.data.length === 0) return true; const worksheet = workbook.addWorksheet(table.name); // 3.設(shè)置單元格合并,設(shè)置單元格邊框,設(shè)置單元格樣式,設(shè)置值 setStyleAndValue(table.data, worksheet); setMerge(table.config.merge, worksheet); setBorder(table.config.borderInfo, worksheet); return true; }) // 4.寫入 buffer const buffer = await workbook.xlsx.writeBuffer(); saveFile(buffer, name); return buffer } var saveFile = function (buf, name) { let blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); const downloadElement = document.createElement('a'); let href = window.URL.createObjectURL(blob); downloadElement.href = href; downloadElement.download = name + ".xlsx"; // 文件名字 document.body.appendChild(downloadElement); downloadElement.click(); document.body.removeChild(downloadElement); // 下載完成移除元素 window.URL.revokeObjectURL(href); // 釋放掉blob對象 } //轉(zhuǎn)換顏色 var rgb2hex = function (rgb) { if (rgb.charAt(0) == '#') { return rgb; } var ds = rgb.split(/\D+/); var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]); return "#" + zero_fill_hex(decimal, 6); function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; }; }; var setMerge = function (luckyMerge = {}, worksheet) { const mergearr = Object.values(luckyMerge) mergearr.forEach(function (elem) { // elem格式:{r: 0, c: 0, rs: 1, cs: 2} // 按開始行,開始列,結(jié)束行,結(jié)束列合并(相當(dāng)于 K10:M12) worksheet.mergeCells(elem.r + 1, elem.c + 1, elem.r + elem.rs, elem.c + elem.cs); }) } var setBorder = (luckyBorderInfo, worksheet) => { if (!Array.isArray(luckyBorderInfo)) return luckyBorderInfo.forEach((elem) => { var val = elem; let border = {} const luckyToExcel = { type: { 'border-top': 'top', 'border-right': 'right', 'border-bottom': 'bottom', 'border-left': 'left' }, style: { 0: 'none', 1: 'thin', 2: 'hair', 3: 'dotted', 4: 'dashDot', 5: 'dashDot', 6: 'dashDotDot', 7: 'double', 8: 'medium', 9: 'mediumDashed', 10: 'mediumDashDot', 11: 'mediumDashDotDot', 12: 'slantDashDot', 13: 'thick' } } if (val.rangeType === 'range') { let color = (val.color.replace('#', '')).toUpperCase() if (val.borderType === 'border-all') { border['top'] = { style: luckyToExcel.style[val.style], color: { argb: color } } border['right'] = { style: luckyToExcel.style[val.style], color: { argb: color } } border['bottom'] = { style: luckyToExcel.style[val.style], color: { argb: color } } border['left'] = { style: luckyToExcel.style[val.style], color: { argb: color } } } else { border[luckyToExcel.type[val.borderType]] = { style: luckyToExcel.style[val.style], color: { argb: color } } } val.range.forEach(item => { for (let r = item.row[0]; r < item.row[1] + 1; r++) { for (let c = item.column[0]; c < item.column[1] + 1; c++) { worksheet.getCell(r + 1, c + 1).border = border } } }) } else if (val.rangeType === 'cell') { border['top'] = { style: luckyToExcel.style[val.value.t.style], color: { argb: (val.value.t.color.replace('#', '')).toUpperCase() } } border['right'] = { style: luckyToExcel.style[val.value.r.style], color: { argb: (val.value.r.color.replace('#', '')).toUpperCase() } } border['bottom'] = { style: luckyToExcel.style[val.value.b.style], color: { argb: (val.value.b.color.replace('#', '')).toUpperCase() } } border['left'] = { style: luckyToExcel.style[val.value.l.style], color: { argb: (val.value.l.color.replace('#', '')).toUpperCase() } } worksheet.getCell(val.value.row_index + 1, val.value.col_index + 1).border = border } }) } var setStyleAndValue = function (cellArr, worksheet) { if (!Array.isArray(cellArr)) return; cellArr.forEach(function (row, rowid) { const dbrow = worksheet.getRow(rowid + 1); //設(shè)置單元格行高,默認(rèn)乘以1.2倍 dbrow.height = luckysheet.getRowHeight([rowid])[rowid] * 1.2; row.every(function (cell, columnid) { if (!cell) return true; if (rowid == 0) { const dobCol = worksheet.getColumn(columnid + 1); //設(shè)置單元格列寬除以8 dobCol.width = luckysheet.getColumnWidth([columnid])[columnid] / 8; } let fill = fillConvert(cell.bg); let font = fontConvert(cell.ff, cell.fc, cell.bl, cell.it, cell.fs, cell.cl, cell.ul); let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr); let value; var v = ''; if (cell.ct && cell.ct.t == 'inlineStr') { var s = cell.ct.s; s.forEach(function (val, num) { v += val.v; }) } else { v = cell.v; } if (cell.f) { value = { formula: cell.f, result: v }; } else { value = v; } let target = worksheet.getCell(rowid + 1, columnid + 1); target.fill = fill; target.font = font; target.alignment = alignment; target.value = value; return true; }) }) } var fillConvert = function (bg) { if (!bg) { return { type: 'pattern', pattern: 'solid', fgColor: { argb: '#ffffff'.replace('#', '') } } } bg = bg.indexOf('rgb') > -1 ? rgb2hex(bg) : bg; let fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: bg.replace('#', '') } } return fill } var fontConvert = function (ff = 0, fc = '#000000', bl = 0, it = 0, fs = 10, cl = 0, ul = 0) { // luckysheet:ff(樣式), fc(顏色), bl(粗體), it(斜體), fs(大小), cl(刪除線), ul(下劃線) const luckyToExcel = { 0: '微軟雅黑', 1: '宋體(Song)', 2: '黑體(ST Heiti)', 3: '楷體(ST Kaiti)', 4: '仿宋(ST FangSong)', 5: '新宋體(ST Song)', 6: '華文新魏', 7: '華文行楷', 8: '華文隸書', 9: 'Arial', 10: 'Times New Roman ', 11: 'Tahoma ', 12: 'Verdana', num2bl: function (num) { return num === 0 ? false : true } } let font = { name: ff, family: 1, size: fs, color: { argb: fc.replace('#', '') }, bold: luckyToExcel.num2bl(bl), italic: luckyToExcel.num2bl(it), underline: luckyToExcel.num2bl(ul), strike: luckyToExcel.num2bl(cl) } return font; } var alignmentConvert = function (vt = 'default', ht = 'default', tb = 'default', tr = 'default') { // luckysheet:vt(垂直), ht(水平), tb(換行), tr(旋轉(zhuǎn)) const luckyToExcel = { vertical: { 0: 'middle', 1: 'top', 2: 'bottom', default: 'top' }, horizontal: { 0: 'center', 1: 'left', 2: 'right', default: 'left' }, wrapText: { 0: false, 1: false, 2: true, default: false }, textRotation: { 0: 0, 1: 45, 2: -45, 3: 'vertical', 4: 90, 5: -90, default: 0 } } let alignment = { vertical: luckyToExcel.vertical[vt], horizontal: luckyToExcel.horizontal[ht], wrapText: luckyToExcel.wrapText[tb], textRotation: luckyToExcel.textRotation[tr] } return alignment; } export { exportSheetExcel }
調(diào)用方法exportSheetExcel(luckysheet.getluckysheetfile(), "報表名稱");
到此這篇關(guān)于vue使用Luckysheet插件實現(xiàn)excel導(dǎo)入導(dǎo)出的文章就介紹到這了,更多相關(guān)vue Luckysheet excel導(dǎo)入導(dǎo)出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
- vue使用luckyexcel實現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
- 前端實現(xiàn)Excel文件導(dǎo)出功能的完整代碼解析(vue實現(xiàn)excel文件導(dǎo)出)
- vue2項目使用exceljs多表頭導(dǎo)出功能詳解
- Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式
- vue使用xlsx庫和xlsx-style庫導(dǎo)入導(dǎo)出excel、設(shè)置單元格背景色、文字居中、合并單元格、設(shè)置列寬
- 在Vue中使用xlsx組件實現(xiàn)Excel導(dǎo)出功能的步驟詳解
- 在Vue中實現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
相關(guān)文章
VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05el-form-item表單label添加提示圖標(biāo)的實現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11在vue react中如何使用Web Components組件
這篇文章主要介紹了在vue react中如何使用Web Components組件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05