vue exports excel containing multiple tables and sets borders, background color, font, width, etc.

Preface: The excel exported before has only one table in the excel. In this development, the function to be realized is to have three tables in one project, and the cells must be set in different styles. Many problems have been encountered, and they are specially recorded. .

The content outline is as follows:

Table of contents

1. Select the plug-in

2. Create a workbook object

3. Set the style

1. Merge cells

 2. Set the cell public style

3. Set the border of the cell

4. Set column width

5. Set the slash in the cell

---

1. Select the plug-in

At the beginning, we need to choose a plug-in based on whether we need to set the style ourselves:

Since we are exporting excel files, we need to use the xlsx plug-in

npm i xlsx

 Secondly, we need to change the cell style, so this time we use the xlsx-style plug-in

npm i xlsx-style

When ready, introduce these two plug-ins into the js file

import * as XLSX from 'xlsx'
import XLSX2 from 'xlsx-style'

2. Create a workbook object

1. Create a workbook object: (table1 and table2 are table data, which are [['', '', ''], ['', '', ''], ['', '', ''] ] format)

 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的工作表

 At this point, we can generate the basic workbook object.

The worksheet object in the workbook. Each !attribute in this object that does not begin with represents a cell.

3. Set the style

1. Merge cells

The !merges field in the worksheet stores merged cells. We can customize the cells to be merged and put them in.

// 定义要合并的单元格
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. Set the cell public style

The styles of cells are stored in workbook[key].s. We can set the styles of certain cells individually after setting the common styles.

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. Set the border of the cell

Set a border for a cell

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

The style of the border:

thin

medium

 

thick

dotted

 
hair

 
dashed

 
mediumDashed

dashDot

mediumDashDot

dashDotDot 

mediumDashDotDot

 

slantDashDot

double

 

4. Set column width

The column width of the cell uses the !cols attribute, and the order of the columns is from left to right, starting from 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. Set the slash in the cell

The direction of the slash and the style of the slash must be used at the same time, otherwise it will have no effect.

Slash direction:

diagonalDown: diagonal downward direction
diagonalUp: diagonal upward direction

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