用户在线修改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）的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91833.html
