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: 对角线向上方向文章来源地址https://www.toymoban.com/news/detail-490007.html

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'
        }
      }
    }

到了这里，关于vue导出含有多个表的excel，并设置边框、背景色、字体、宽度等的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！