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(); // 先銷毀當前容器
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é)束列合并(相當于 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è)置單元格行高,默認乘以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),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
el-form-item表單label添加提示圖標的實現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標的實現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標以及如何自定義圖標樣式,感興趣的可以了解一下2023-11-11
在vue react中如何使用Web Components組件
這篇文章主要介紹了在vue react中如何使用Web Components組件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05

