vue项目使用xlsx-style导出自定义格式excel

最新推荐文章于 2025-05-18 14:30:00 发布

db199410

最新推荐文章于 2025-05-18 14:30:00 发布

阅读量7.2k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签： nodejs vue node.js vue.js

本文链接：https://blog.csdn.net/db199410/article/details/104450913

在Vue项目中，遇到使用xlsx-style导出Excel时，自定义格式的合并单元格边框显示不完整的问题。解决方案是拆分合并单元格，并循环赋值边框属性。提供了一个DEMO及最终实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.遇到问题

1.给自定义格式的excel中的合并单元格加边框的时候,出现边框不完整的情况.

解决:将该合并单元格拆分成最小单位的单元格,设置其边框属性. 直接赋值的话不可行,因为子单元格并没有边框属性,只有合并单元格才有, 这里使用的方法是:记录合并单元格的属性信息, 然后循环对子单元格赋值.
代码:

function addRangeBorder(range,ws){
	let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    
	range.forEach(item=>{
		let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r);
		let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c);
		const test = ws[arr[startRowNumber] + (startColNumber + 1)];
		for(let col = startColNumber ; col <= endColNumber ; col++)
		{
			for(let row = startRowNumber; row <= endRowNumber ; row++)
			{
				//const test = ws[arr[j] + i];
				//console.log(arr[row] + (col + 1));
				ws[arr[row] + (col + 1)] = test;
				//{s:{border:{top:{style:'thin'}, left:{style:'thin'},bottom:{style:'thin'},right:{style:'thin'}}}};
			}
		}
	})
	return ws;
}

二.DEMO

一个完整的例子:

import FileSaver from 'file-saver'
import XLSX from 'xlsx-style'
 
 // 设置表格中cell默认的字体，居中，颜色等

var defaultCellStyle = {
 			font: {
 				name: "宋体", sz: 11, color: { auto: 1 } ,
 			},
 			border: {
 				color: { auto: 1 },
				top: { style: 'thin' },
				bottom: { style: 'thin'},
				left: { style: 'thin' },
				right: { style: 'thin' }
 			},
 			alignment: {
 				/// 自动换行
 				wrapText: 1,
 					// 居中
 				horizontal: "center",

最低0.47元/天解锁文章