Luckysheet结合Vue3在线excel实战
按照用户要求项目需要实现能从接口或者手动导入excel文件，然后在web端网页编辑的功能，并且excel中的部分数据需要依据其他接口进行回填计算。
目前市面上已经有部分成熟的在线excel但是设计到的功能需要付费，开始调研找到一款开发程度较高的在线excel js插件-Luckysheet.js。
Luckysheet是由个人主导、几个志同道合的小伙伴一同开发的插件，目前已经停止更新并且产生了下一个迭代产品Univer。使用Luckysheet开发的项目可以根据自身需要考虑是否升级为Univer。
Luckysheet开发中文文档 dream-num.github.io/LuckysheetD…
在线demo
下面开始介绍如何使用Luckysheet插件:
1项目导入:
npm install luckyexcel --save
2. 按需加载
在需要使用Luckysheet的文件中导入
import LuckyExcel from "luckyexcel";
3.Luckysheet实例初始化：
a.调用transformExcelToLucky方法可对xlsx类型的file数据直接解析，解析完成后需要在回调函数中拿到解析的exportJson和luckysheetfile数据做进一步的数据处理。
LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert("Failed to read the content of the excel file, currently does not support xls files!");
return;
}
loadExcel(exportJson); // 执行加载解析出的export JSON数据方法
});
b. 按照需求编写处理解析出的export JSON数据方法（luckysheet中初始化参数配置可以参考技术文档）
const loadExcel = (exportJson, init = false) => {
// 手动合并单元格
exportJson.sheets[0].celldata.forEach(item => {
if (item.v) {
item.v.tb = 2;
}
});
window.luckysheet.destroy();
// 初始化参数配置
window.luckysheet.create({
container: option.value.container, //luckysheet is the container id
showinfobar: false,
forceCalculation: true,
showGridLines: true,
data: exportJson.sheets,
title: "reservoir",
showstatisticBar: false,
showtoolbarConfig: {
paintFormat: false, //格式刷
currencyFormat: false, //货币格式
percentageFormat: false, //百分比格式
numberDecrease: false, // '减少小数位数'
numberIncrease: false, // '增加小数位数
moreFormats: false, // '更多格式'
mergeCell: false, // '合并单元格'
textRotateMode: false, // '文本旋转方式'
image: false, // '插入图片'
link: false, // '插入链接'
chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
postil: false, //'批注'
pivotTable: false, //'数据透视表'
function: false, // '公式'
frozenMode: false, // '冻结方式'
sortAndFilter: false, // '排序和筛选'
conditionalFormat: false, // '条件格式'
dataVerification: false, // '数据验证'
splitColumn: false, // '分列'
screenshot: false, // '截图'
findAndReplace: false, // '查找替换'
print: false // '打印'
},
cellRightClickConfig: {
rowHeight: false, // 行高
columnWidth: false, // 列宽
clear: false, // 清除内容
matrix: false, // 矩阵操作选区
sort: false, // 排序选区
filter: false, // 筛选选区
chart: false, // 图表生成
image: false, // 插入图片
link: false, // 插入链接
data: false, // 数据验证
cellFormat: false // 设置单元格格式
},
userInfo: "user",
hook: {
workbookCreateAfter: () => {
excelRowLength = exportJson.sheets[0].data.length || 1000;
if (init) {
luckysheet.setRowHeight({ 1: 40, 5: 40 });
getformData();
showEditCells();
nextTick(() => {
emits("handlerTabLoadingFinish");
setTimeout(() => {
saveWTWData();
}, 2000);
});
} else {
emits("handlerTabLoadingFinish");
}
isAlreadyInit.value = true;
},
cellEditBefore: arr => {
if (waterPlanStore.status == "2") {
nextTick(() => {
luckysheet.exitEditMode();
});
} else {
if (arr && arr.length > 0) {
if (
arr[0].column_focus === 1 ||
arr[0].column_focus === 7 ||
arr[0].column_focus === 13 ||
arr[0].column_focus === 14 ||
arr[0].row_focus === 5
) {
nextTick(() => {
luckysheet.exitEditMode();
});
}
}
}
},
cellMousedown: function (cell, position, sheet) {
if (position !== lastPosition) {
lastPosition = clickPosition;
}
clickPosition = position;
if (clickPosition.c == 10 && clickPosition.r >= 6 && selectSourceAble.value) {
getReservoirSource(window.luckysheet.getCellValue(clickPosition.r, 7));
}
},
cellUpdated: function (r, c, oldValue, newValue) {
if (c == 10 && r >= 6) {
// 编辑to service Reservoir Adjustment列
let reservoirName = window.luckysheet.getCellValue(r, 7);
waterPlanStore.updatReservoirAdjustment({ [reservoirName]: newValue.v });
}
if (c == 4) {
nextTick(() => {
setTimeout(() => {
saveItemWTWData(r);
}, 500);
});
}
}
},
ch_width: 1600,
rh_height: 800
});
};
其中的一些配置项与生命周期可以参考Luckysheet自身文档，可在生命周期中完成数据回填，单元格高亮，单元格合并、隐藏，添加公式、修改单元格样式等。
