位置: IT常识 - 正文
vue导出含有多个表的excel，并设置边框、背景色、字体、宽度等(vue实现导出)
发布时间：2024-01-03推荐整理分享vue导出含有多个表的excel，并设置边框、背景色、字体、宽度等(vue实现导出)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue实现导出,vue实现导出功能,vue实现导出功能,vue实现导出功能,vue导出数据到excel,vue实现导出,vue实现导出,vue导出数据到excel,内容如对您有帮助，希望把文章链接给更多的朋友！
前言：之前导出的excel都是一个excel中只有一个表格，在这次开发中，要实现的功能是一个项目中有三个表格，而且单元格还要设置不同的样式，遇到了很多问题，特意记录。
内容大纲如下：
目录
一、选择插件
二、创建工作簿对象
三、设置样式
1. 合并单元格
2. 设置单元格公共样式
3.单元格设置边框
4.设置列宽
5.在单元格中设置斜线
一、选择插件
最开始，我们要根据是否需要自己设置样式选择好插件：
由于我们导出的是excel文件，所以要使用xlsx插件
npm i xlsx其次，要对单元格样式进行更改，所以这次使用的是xlsx-style 插件
npm i xlsx-style准备就绪，将这两个插件引入到js文件中
import * as XLSX from 'xlsx'import XLSX2 from 'xlsx-style'二、创建工作簿对象1. 创建一个工作簿对象：（table1和table2是表数据，是[['', '', ''], ['', '', ''], ['', '', '']]的格式）
var wb = XLSX.utils.book_new() // 工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象，XLSX.utils.book_new使用函数创建一个新的工作簿对象 var ws_name = 'SheetJS' // 给工作表命名 var workbook = XLSX.utils.aoa_to_sheet(table1) // 定义工作表，并在里边添加第一个表格 XLSX.utils.sheet_add_aoa(workbook, table2, { origin: 'B1' }) // 向工作表中追加一个表格，并设置从哪个单元格开始 XLSX.utils.book_append_sheet(wb, workbook, ws_name) // 合成工作簿，向工作簿中添加命名为wa_name的工作表这时，我们就可以生成基础的工作簿对象。
工作簿中的工作表对象，这个对象中每个不以!开头的属性，都代表一个单元格。
三、设置样式1. 合并单元格工作表中的 !merges字段存储的是合并的单元格，我们可以自定义要合并的单元格，并把它放进去。
// 定义要合并的单元格var merges = [ 'A20:E21', 'A1:A3', 'B1:R3', 'S1:V3', 'A4:V4', 'A5:E5', 'A13:E13', 'G5:H5', 'G6:G9', 'G10:G13', 'G14:G17', 'G18:G21', 'A6:A7', 'B6:B7', 'C6:D7', 'V6:V7', 'H6:H7', 'I6:I7', 'J6:J7', 'K6:K7', 'L6:L7']// 将要合并的单元格放进工作表中if (merges.length > 0) { if (!workbook['!merges']) workbook['!merges'] = [] merges.forEach(item => { workbook['!merges'].push(XLSX.utils.decode_range(item)) }) } 2. 设置单元格公共样式单元格的样式都存储在workbook[key].s中，我们可以在设置完公共样式后单独再设置某些单元格的样式。
let borderAll = { // 单元格外侧框线 top: { style: 'thin', color: { rgb: '000000' } }, bottom: { style: 'thin', color: { rgb: '000000' } }, left: { style: 'thin', color: { rgb: '000000' } }, right: { style: 'thin', color: { rgb: '000000' } } }// 设置公共样式if (workbook[key] instanceof Object) { workbook[key].s = { border: borderAll, // 边框样式设置 alignment: { // 文字样式设置 horizontal: 'center', // 字体水平居中 vertical: 'center', // 垂直居中 wrapText: 1 // 自动换行 }, fill: { //背景色 fgColor: { rgb: 'C0C0C0' } }, font: { // 单元格中字体的样式与颜色设置 sz: 10, color: { rgb: '000000' }, bold: false }, bold: true, numFmt: 0 } }3.单元格设置边框给某个单元格设置边框
if (key === 'A1') { workbook[key].s.border = { top: { style: 'thin', color: { rgb: 'FFFFFF' } }, bottom: { style: 'double', color: { rgb: '3E87C8' } }, left: { style: 'thin', color: { rgb: 'FFFFFF' } }, right: { style: 'thin', color: { rgb: 'FFFFFF' } } } }边框的样式：
thin
medium
thick
dotted
hair
dashed
mediumDashed
dashDot
mediumDashDot
dashDotDot
mediumDashDotDot
slantDashDot
double
4.设置列宽
单元格的列宽用的是 !cols 属性，列的顺序是从左向右，从0开始
if (!workbook['!cols']) workbook['!cols'] = [] for (var i = 0; i <= 21; i++) { if (i === 0 || i === 1 || i === 4 || i === 7) { workbook['!cols'][i] = { wpx: 60 } } else if (i === 2 || i === 3) { workbook['!cols'][i] = { wpx: 25 } } else { workbook['!cols'][i] = { wpx: 50 } } }5.在单元格中设置斜线斜线的方向与斜线的样式必须同时使用，不然没有效果
斜线方向：
diagonalDown：对角线向下方向 diagonalUp: 对角线向上方向
if (key === 'A6') { workbook[key].s.border = { top: { style: 'thin', color: { rgb: '000000' } }, bottom: { style: 'thin', color: { rgb: '000000' } }, left: { style: 'thin', color: { rgb: '000000' } }, right: { style: 'thin', color: { rgb: '000000' } }, diagonalDown: true, // 斜线方向 diagonal: { // 斜线样式 color: { rgb: '000000' }, style: 'thin' } } }上一篇：电竞显示器怎么选？小编教你如何挑选专业电竞(电竞显示器怎么调整参数)
下一篇：解决Cannot read properties of undefined (reading ‘resetFields‘)(解决中暑最有效方法)
