项目实训：用户在线修改excel（luckysheet）（阿里云在线实训项目）

用户在线修改excel

任务

导入luckysheet、luckyexcel、file-saver、exceljs组件，方便用户在线修改Excel。

Luckysheet，纯前端类Excel在线表格

Luckyexcel是一个由Luckysheet改编而来的Excel导入导出库。

luckysheet：https://dream-num.github.io/LuckysheetDocs/zh/guide/#demoluckyexcel：https://gitee.com/mengshukeji/Luckyexcel#https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fmengshukeji%2FLuckyexcel-node

luckysheet的使用

将CDN资源部署到public/index.html。

链接rel=\’stylesheet\’ href=\’https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css\’ /

链接rel=\’stylesheet\’ href=\’https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css\’/

链接rel=\’stylesheet\’ href=\’https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css\’ /

链接rel=\’stylesheet\’ href=\’https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css\’ /

脚本src=\’https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js\’/script

脚本src=\’https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js\’/script

创建容器

div id=\’luckysheet\’ style=\’margin-top:39px;padding:0px;position:absolute;width:1470px;height:623px;left: 0px;top: 0px;\’/div

创建实例表单

安装（）{

幸运表.create({

容器：“幸运单”，

显示信息栏： 假，

showsheetbar: 真实，

showtoolbar: 真实，

显示统计栏： 真实，

显示状态栏： 真实，

showgrid: 真实，

showrowheader: 真实，

显示columnheader: 真实，

行高： 25,

列宽： 100,

变焦： 100，

默认缩放： 100，

默认行高： 25,

默认列宽： 100,

lang: \’zh\’,

//更多配置选项.

});

},

导入导出

Excel导入

使用el-upload 上传文件el-upload

动作=\’#\’

第：章自动上传=\’假\’

第：章显示文件列表=\’假\’

:on-change=\’importExcel\’el-button 导入Excel/el-button/el-upload

赋值给文件并初始化幸运表实例importExcel(file,fileList){

这个.file=文件.raw

//使用LuckyExcel 转换文件

LuckyExcel.transformExcelToLucky(

这个文件，

（导出Json）={

console.log(幸运表)

幸运表.create({

容器：“幸运单”，

显示信息栏： 假，

showsheetbar: 真实，

showtoolbar: 真实，

显示统计栏： 真实，

显示状态栏： 真实，

showgrid: 真实，

showrowheader: 真实，

显示columnheader: 真实，

行高： 25,

列宽： 100,

变焦： 100，

默认缩放： 100，

默认行高： 25,

默认列宽： 100,

lang: \’zh\’,

data:exportJson.sheets

});

},

（错误）={

console.error(\’导入失败。文件是有效的xlsx 吗？\’, error);

}

）；

},

Excel导出

请参考官方网站。有两种方法

https://www.jb51.net/javascript/3179020af.htm#_label1

使用Exceljs和文件保存方法

安装ExcelJS 和File Saver npm i ExcelJS File Saver

下载export.js 文件//import { createCellPos } from \’./translateNumToLetter\’

const Excel=require(\’exceljs\’)

从“文件保护程序”导入文件保护程序

导出var testaaa=函数(){

console.log(\’.\’);

}

导出var exportExcel=函数(luckysheet, 值) {

//参数是用luckysheet.getluckysheetfile()获得的对象

//1.创建工作簿并为工作簿添加属性

const 工作簿=new Excel.Workbook()

//2. 创建表。第二个参数允许您设置将创建的工作表的类型。

if (Object.prototype.toString.call(luckysheet)===\'[Object Object]\’) {

幸运单=【幸运单】

}

luckysheet.forEach(函数(表) {

if (table.data.length===0) 返回true

//ws.getCell(\’B2\’).fill=填充。

const 工作表=workbook.addWorksheet(table.name)

const merge=(table.config table.config.merge) || {}

const borderInfo=(table.config table.config.borderInfo) ||

//3.设置单元格合并、设置单元格边框、设置单元格样式、设置值

setStyleAndValue(表.数据， 工作表)

setMerge（合并，工作表）

setBorder（边框信息，工作表）

返回真

})

//返回

//4. 写入缓冲区

constbuffer=workbook.xlsx.writeBuffer().then(data={

//console.log(\’数据\’, 数据)

const blob=new Blob([数据], {

type: \’应用程序/vnd.ms-excel;charset=utf-8\’

})

console.log(\’导出成功！\’)

FileSaver.saveAs(blob, `${value}.xlsx`)

})

返回缓冲区

}

var setMerge=函数(luckyMerge={}, 工作表) {

const mergearr=Object.values(luckyMerge)

mergearr.forEach(函数(elem) {

//元素格式：{r: 0, c: 0, rs: 1, cs: 2}

//按起始行、起始列、结束行、结束列合并（相当于K10:M12）

工作表.mergeCells(

elem.r + 1,

elem.c+1,

elem.r + elem.rs,

elem.c + elem.cs

）

})

}

var setBorder=函数（luckyBorderInfo，工作表）{

if (!Array.isArray(luckyBorderInfo)) 返回

//console.log(\’luckyBorderInfo\’, luckyBorderInfo)

luckyBorderInfo.forEach(函数(elem) {

//目前仅当borderType 为range 时兼容

//console.log(\’ele\’, elem)

if (elem.rangeType===\’范围\’) {

让border=borderConvert(elem.borderType, elem.style, elem.color)

让范围=elem.range[0]

//console.log(\’范围\’, 范围)

让行=rang.row

让列=rang.column

for (让i=行[0] + 1; i 行[1] + 2; i++) {

for (让y=列[0] + 1; y 列[1] + 2; y++) {

worksheet.getCell(i, y).border=边框

}

}

}

if (elem.rangeType===\’单元格\’) {

//col_index: 2

//row_index: 1

//b: {

//color: \’#d0d4e3\’

//样式： 1

//}

const {col_index, row_index}=elem.value

const borderData=Object.assign({}, elem.value)

删除borderData.col_index

删除borderData.row_index

让边框=addborderToCell(borderData, row_index,col_index)

//console.log(\’bordre\’, border, borderData)

worksheet.getCell(row_index + 1,col_index + 1).border=边框

}

//console.log(rang.column_focus + 1, rang.row_focus + 1)

//worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border=边框

})

}

var setStyleAndValue=函数(cellArr, 工作表) {

if (!Array.isArray(cellArr)) 返回

cellArr.forEach(函数(行，rowid) {

row.every(函数(单元格， 列ID) {

if (!cell) 返回true

让填充=fillConvert(cell.bg)

让字体=字体转换（

细胞.ff,

细胞.fc,

细胞.bl,

细胞它，

细胞.fs,

细胞.cl,

细胞.ul

）

letalignment=alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr)

设定值=\’\’

if (cell.f) {

值={ 公式： cell.f, 结果： cell.v }

} else if (!cell.v cell.ct cell.ct.s) {

//xls转换为xlsx时，内部格式不同，都是富文本。也就是说，该值不存在于cell.v 中，而是出现在cell.ct.s 之后。

//值=cell.ct.s[0].v

cell.ct.s.forEach(arr={

值+=数组v

})

} 除此之外{

值=单元格.v

}

//填充样式为_value以实现填充颜色

让字符=createCellPos(columnid)

让目标=worksheet.getCell(字母+ (rowid + 1))

//console.log(\’1233\’, 字符+ (行ID + 1))

for (嵌入const 键) {

目标.填充=填充

休息

}

目标.font=字体

目标.对齐=对齐

目标值=价值

返回真

})

})

}

var fillConvert=函数(bg) {

如果（！bg）{

返回{}

}

//const bgc=bg.replace(\’#\’, \’\’)

填充={

type:“模式”，

图案：\’实心\’，

fgColor: { argb: bg.replace(\’#\’, \’\’) }

}

返回填充

}

var 字体转换=函数(

ff=0,

fc=\’#000000\’,

BB=0,

它=0，

FS=10，

cl=0，

ul=0

）{

//幸运表：ff（样式）、fc（颜色）、bl（粗体）、it（斜体）、fs（大小）、cl（删除线）、ul（下划线）

常量luckyToExcel={

0: \’微软雅黑\’,

1:“歌曲”,

2:\’ST海地\’,

3:\’ST凯蒂\’,

4:\’ST粉丝歌\’,

5:“ST歌”，

6:《中国新魏》，

7: \’汉字\’,

8: \’中国的官方字符\’,

9: \’空中\’,

10: \’时代新罗马\’,

11: \’塔霍马\’,

12: \’维达纳\’,

num2bl: 函数（数字）{

返回值===0 : true ？

}

}

//导入时出现bug，luckyToExcel的val变成ff。

让字体={

name: typeof ff===\’数字\’ ? luckyToExcel[ff] : ff,

家庭： 1、

尺寸： fs，

color: { argb: fc.replace(\’#\’, \’\’) },

Bold: luckyToExcel.num2bl(bl),

斜体： luckyToExcel.num2bl(it),

下划线： luckyToExcel.num2bl(ul),

Strike: luckyToExcel.num2bl(cl)

}

返回字体

}

varalignmentConvert=函数(

vt=\’默认\’,

ht=\’默认\’,

tb=\’默认\’,

tr=\’默认\’

）{

//luckysheet:vt（垂直）、ht（水平）、tb（换行）、tr（旋转）

常量luckyToExcel={

垂直： {

0: \’中级\’,

1:“顶”,

2: \”底部\”,

默认：“顶部”

},

水平： {

0: \’中心\’,

1: \’左\’,

2: “是”,

默认： \’左\’

},

文本换行： {

0: 错误，

1:假，

2: 确实，

默认： 假

},

文本旋转： {

0: 0,

1: 45,

2:-45,

3:\’垂直\’,

4: 90,

5: -90,

默认： 0

}

}

对齐={

垂直： luckyToExcel.vertical[vt],

水平： luckyToExcel.horizontal[ht],

WrapText: luckyToExcel.wrapText[tb],

textRotation: luckyToExcel.textRotation[tr]

}

恢复对齐

}

var borderConvert=函数(borderType, style=1, color=\’#000\’) {

//对应luckysheet设置中的borderinfo参数

if (!borderType) {

return {}
}
const luckyToExcel = {
type: {
\’border-all\’: \’all\’,
\’border-top\’: \’top\’,
\’border-right\’: \’right\’,
\’border-bottom\’: \’bottom\’,
\’border-left\’: \’left\’
},
style: {
0: \’none\’,
1: \’thin\’,
2: \’hair\’,
3: \’dotted\’,
4: \’dashDot\’, // \’Dashed\’,
5: \’dashDot\’,
6: \’dashDotDot\’,
7: \’double\’,
8: \’medium\’,
9: \’mediumDashed\’,
10: \’mediumDashDot\’,
11: \’mediumDashDotDot\’,
12: \’slantDashDot\’,
13: \’thick\’
}
}
let template = {
style: luckyToExcel.style[style],
color: { argb: color.replace(\’#\’, \’\’) }
}
let border = {}
if (luckyToExcel.type[borderType] === \’all\’) {
border[\’top\’] = template
border[\’right\’] = template
border[\’bottom\’] = template
border[\’left\’] = template
} else {
border[luckyToExcel.type[borderType]] = template
}
// console.log(\’border\’, border)
return border
}
function addborderToCell(borders, row_index, col_index) {
let border = {}
const luckyExcel = {
type: {
l: \’left\’,
r: \’right\’,
b: \’bottom\’,
t: \’top\’
},
style: {
0: \’none\’,
1: \’thin\’,
2: \’hair\’,
3: \’dotted\’,
4: \’dashDot\’, // \’Dashed\’,
5: \’dashDot\’,
6: \’dashDotDot\’,
7: \’double\’,
8: \’medium\’,
9: \’mediumDashed\’,
10: \’mediumDashDot\’,
11: \’mediumDashDotDot\’,
12: \’slantDashDot\’,
13: \’thick\’
}
}
// console.log(\’borders\’, borders)
for (const bor in borders) {
// console.log(bor)
if (borders[bor].color.indexOf(\’rgb\’) === -1) {
border[luckyExcel.type[bor]] = {
style: luckyExcel.style[borders[bor].style],
color: { argb: borders[bor].color.replace(\’#\’, \’\’) }
}
} else {
border[luckyExcel.type[bor]] = {
style: luckyExcel.style[borders[bor].style],
color: { argb: borders[bor].color }
}
}
}
return border
}
function createCellPos(n) {
let ordA = \’A\’.charCodeAt(0)
let ordZ = \’Z\’.charCodeAt(0)
let len = ordZ – ordA + 1
let s = \’\’
while (n >= 0) {
s = String.fromCharCode((n % len) + ordA) + s
n = Math.floor(n / len) – 1
}
return s
}
设置环境
首先，导入或加载必要的模块：
Javascript
const Excel = require(‘exceljs’)
import FileSaver from ‘file-saver’
这为处理Excel文件和文件保存设置了环境。
创建工作簿和工作表
使用Excel.Workbook()创建一个新的工作簿。如果luckysheet是一个对象数组，数组中的每个对象代表一张将被添加为独立工作表的工作表。
设置样式、合并、边框和值
对于每张表，使用setStyleAndValue、setMerge和setBorder函数设置样式、合并单元格、边框以及值。
setStyleAndValue
遍历数据，设置单元格属性，如背景填充、字体、对齐方式和值。
setMerge
根据luckyMerge对象定义哪些单元格应该合并，应用单元格合并。
setBorder
根据luckyBorderInfo对象设置单元格边框。
写入缓冲区并保存文件
在所有样式和数据都已应用后，使用workbook.xlsx.writeBuffer()将工作簿写入缓冲区。这个缓冲区随后转换成Blob，并使用FileSaver.saveAs()保存到用户的计算机上。
辅助函数
几个辅助函数用于将LuckySheet特有的样式转换为Excel兼容的格式：
fillConvert用于背景填充
fontConvert用于字体样式
alignmentConvert用于文本对齐
borderConvert用于边框
addborderToCell用于应用到单个单元格的边框
createCellPos用于将列号转换为Excel列字母（例如，1 -> “A”，26 -> “Z”，27 -> “AA”）

使用 import { exportExcel } from \’@/utils/export\’;
downloadExcel(){
exportExcel(luckysheet.getAllSheets(),\”下载\”)
}

成果展示

#以上关于项目实训：用户在线修改excel（luckysheet）的相关内容来源网络仅供参考，相关信息请以官方公告为准！