UI 框架 用的ant-design-vue的table组件来进行渲染表格、以及导表。接着就是xlsx-js-style来做合并表头以及表头颜色按需变动。再者就是file-saver用来下载文件。

说在前面

可知，在b端，或者一些后台管理系统中，表格组件是使用频率以及复杂度相当高的一个组件，前端开发中经常需要根据后端接口返回的数据去把数据给渲染出来，以便用户去查看数据。

在这其中，有的表格，列可能不是固定的、表头可能需要动态去渲染或者合并、以及各行各列的背景色等等等等。

所以，在这篇文中呢，用vue3，以及用UI组件中的ant-design-vue的table组件去把表格渲染、多级表头、表头合并、以及表头样式、以及所见即所得的表格导出，这几点当中，一一详细罗列讲解一下。

安装依赖

1、ant design vue

npm i --save ant-design-vue

按需引入table：import { Table } from 'ant-design-vue'

或者

全部完整注册:

import Antd from "ant-design-vue"
import "ant-design-vue/dist/antd.css"

const app = createApp(App)

app.use(Antd)

2、 xlsx-js-style

npm i xlsx-js-style

3、 file-saver

npm i file-saver

按需渲染表格

根据视频数据，渲染出热门达人一年中(1到12月)的视频数据。效果图如下：

用的ant-design-vue版本是3.2.15， 代码如下:

这里值得一提的是，1到12月用循环遍历，不要重复写代码（能自动就不要重复机械操作）。

这个表格的接口数据接口如下:

定义infos、months，如下:

列columns的定义:

如上代码，customHeaderCell用来设置头部单元格属性，形成表头斑马样式，方便查看数据。

---

带样式导表

所见即所得导表(即带样式导表)

这里讲一下为什么没有选xlsx-style，而是选择了xlsx-js-style插件来作为导出带样式的Excel。因为，第一点: 这个项目是vue3+vite。(xlsx-style除了一开始安装有cptable错误这个问题之外，这个可以手动去改配置文件，其二呢，还有个问题就是会报错 'Uncaught Error: nodebuffer is not supported by this browser' 这个提示，不支持vue3和vite，如若需要支持vue3+vite，还需要安装另一个xlsx-style-vite来加持，还有一些其他的小问题导致并不很好地支持vue3+vite)。

所以这里vue3+vite如若需要导出带有样式、带有合并（表头、行、或列）、等等这种需求的话，推荐用 xlsx-js-style 来做。

先来看看最终导出的xlsx文件，效果如下:

其中要做到的效果有:

重点

1、表头分为第一行和第二行。其中除了第一列的标题项需要向下合并一格外，一到十二月份需要合并5项。其中每5项换个颜色。（这里用到合并和背景色和字体颜色和边框颜色的xlsx运用）。

2、数据渲染（分为表头数据渲染，以及达人内容数据渲染）。

做到这两点的话，这个Excel就成了。相对应Excel的相应导出也基本上万变不离其宗了。

代码

引入

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import XlsxJsStyle from 'xlxs-js-style'

xlsx

首先先用xlsx去做一个workbook对象出来。

接着讲这个workbook对象转成最终能生成excel文件的blob对象。

最后用file-saver去把这个blob对象下载excel表格。

整体的代码走向是这样的:

import { createWs, sheet2Blob, saveXlsx } from './excel'

const ws = []

ws.push(createWs(exportData, exportField, exportTitle, '达人数据'))

saveXlsx(sheet2Blob(ws), '达人数据.xlsx')

其中 exportData 是 要导出的数据的数组, exportField 是 要导出的字段的数组, exportTitle 是 对应字段的中文标题（也就是表头的中文标题）, '达人数据'是代表每一个sheet的名字。

分别需要处理成这种数据结构:

创建一个excel.js文件

添加 把worksheet数据做成 blob文件，以及 保存为excel文件的方法。如下:

其中sheet的数据结构是这样的:

在一个表格中，一般有一个或者多个worksheet，我们这里举例的是一个sheet的情况，多个sheet也是一个sheet一个sheet组合起来的，一个搞定了，自然多个也没问题。

这里worksheet通常是一个对象，包含!ref、!cols、!rows。（这个可以自行去搜索看看，或者打印出来自行分析分析）。

// 首先定义header头部的名字以及sheet名字

export function createWs(data, fields, titles, key) {
  const wsObj = {
    name: key,
  };
  const resource = data;
  const ws = XLSX.utils.json_to_sheet(resource, {
    header: fields,
  });
  
  // ...
}

多级表头背景色

const range = XLSX.utils.decode_range(ws["!ref"])

// 得到的range就是表的渲染范围

e的c 就是 column 有 60 + 1 = 61 (1到12月，每月5个，加一个达人列，总共61列)

e的r 就是 row 有 5条数据 加上 二级表头 就是 6+1 = 7（总共7行）

以上就是渲染的Excel的所有单元格

其中，表头分为两行。

xlsx这个库通过XLSX.utils.encode_col来获得每个单元格的名字，分别代表 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。如下图：

所以通过for循环得到每个单元格，再通过ws[hader].s = style去给每一个单元格样式。

// for循环遍历单元格

for (let c = 0; c <= range.e.c; c++) {
    const col = XLSX.utils.encode_col(c)
    const headerRow1 = col + '1' // 获取第一行 
    const headerRow2 = col + '2' // 获取第二行
    
    ws[header].v = titles[ws[header].v] // ws[header].v 就是 单元格的field每个标识英文名称，这句话就是把header给对应中文渲染上
}

通过第一行的背景色规律，奇数和偶数去变换背景颜色。

let styleSwitch = 0;

if (ws[header].v) {
  styleSwitch += 1;
  if (styleSwitch % 2 === 0) {
    style.fill.fgColor.rgb = "C3D69B";
  } else {
    style.fill.fgColor.rgb = "9BBB59";
  }
}

第二行也是如此。

表头合并

原理就是开发文档中的ws["!merges"].push(XLSX.utils.decode_range("B1:F1") 合并原理。

这个B1:F1的意思就是BCDEF的1合并起来。

代码如下。

至此createWs方法就完成了。

接下来就把createWs得到的ws这个对象，通过sheet2Blob得到blob对象，最后通过saveXlsx方法把Excel下载下来。

可以看出来xlsx的sheetJs真的很强，每周的下载量也是蛮多的。

代码

示例代码在这里。

☎️如若有关于vue3的各种Excel表格纯前端下载的方案或者见解，欢迎评论区留言互相学习。