使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件

已于 2023-07-24 23:03:31 修改
阅读量5.8k 收藏 56
点赞数 12
分类专栏： # Vue 前端大杂烩 文章标签： 前端
于 2023-06-09 16:50:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cai181191/article/details/131130926
版权

本文就是上一篇《使用Python+openpyxl实现导出自定义样式的Excel文件》文章中提到的“之前项目的导出Excel文件操作都是在前端完成的...”这段话中基于前端实现的导出Excel文件方法。

文档地址：https://docs.sheetjs.com/

一、导入依赖
1.若项目是由Vue2 + Webpack构建的，那所需依赖包，如下所示

npm i xlsx
npm i xlsx-style

可能还要解决 Can't resolve './cptable' in '...' 的问题，在 vue.config.js 文件中加入该配置

module.exports = {
    externals: {
        './cptable': 'var cptable'
     }
}

2.若项目是由Vue3 + Vite构建的，那所需依赖包，如下所示

npm i xlsx
npm i xlsx-style-vite

二、引用依赖

import * as XLSX from 'xlsx'
import * as XLSX_STYLE from 'xlsx-style' // Vue2 + Webpack
import * as XLSX_STYLE from 'xlsx-style-vite' // Vue3 + Vite

三、示例代码

/src/Example/ExportExcel/index.vue

<template>
  <div style="display: flex; width: 100%; height: 100%; align-item: center;">
    <a
      style="margin: auto; padding: 5px 11px; background-color: #5e7ce0; border-radius: 3px; color: #fff; cursor: pointer;"
      @click="handelExportExcelClick"
    >
      <small style="display: inline-flex; align-items: center; line-height: 1px;">导出数据</small>
    </a>
  </div>
</template>
 
<script>
import * as XLSX from 'xlsx'
// import * as XLSX_STYLE from 'xlsx-style' // Vue2 + Webpack
import * as XLSX_STYLE from 'xlsx-style-vite' // Vue3 + Vite
 
export default {
  data: () => ({
    targetList: []
  }),
  methods: {
    /**
     * 导出数据
     */
    handelExportExcelClick() {
      // 一、准备数据
      const list = this.getExportDataList()
      console.log('list =>', list)
 
      // 二、新建一个工作簿
      const workBook = XLSX.utils.book_new()
 
      // 三、使用二维数组生成一个工作表
      const workSheet = this.sheet_from_array_of_arrays(list)
 
      // 四、将 "A1" 到 "M1" 的单元格合并为 "A1"
      workSheet['!merges'] = [
        {
          s: { // s ("start"): c = 0 r = 0 -> "A1"
            r: 0,
            c: 0
          },
          e: { // e ("end"):   c = 0 r = 9 -> "J1"
            r: 0,
            c: 9
          }
        }
      ]
 
      // 五、设置每列的宽度（单位：px）
      const wsCols = [
        { wch: 10 },
        { wch: 30 },
        { wch: 40 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 20 },
        { wch: 20 },
      ]
      workSheet['!cols'] = wsCols
 
      // 六、设置每行的高度（单位：px）
      let wsRows = []
      for (let i in list) {
        if (i == 0) {
          wsRows.push({ hpx: 100 }) // 首行高度为 100px
        } else {
          // wsRows.push({ hpx: 30 }) // 其他行高度为 30px
        }
      }
      workSheet['!rows'] = wsRows
 
      // 七、设置单元格样式
      for (let key in workSheet) {
        if (key == '!ref' || key == '!merges' || key == '!cols' || key == '!rows') {
          continue
        } else {
          // 匹配表格第一行（注意 A1 单元已合并为一个单元），设置其样式
          if (key == 'A1') {
            workSheet[key] = {
              t: 's', // 设置单元格类型（type: b Boolean, e Error, n Number, d Date, s Text, z Stub）
              v: '爆款商品列表', // 设置单元格内容（raw value (number, string, Date object, boolean)）
              l: { Target: "https://sheetjs.com", Tooltip: "Find us @ SheetJS.com!" }, // 单元格超链接 cell hyperlink / tooltip (More Info)
              s: { // 设置单元格样式
                fill: { // 设置背景色
                  fgColor: { rgb: 'ffffff' },
                },
                font: { // 设置字体
                  name: '等线', // 字体名称
                  sz: 35, // 字体大小
                  bold: true, // 字体是否加粗
                  color: { rgb: '5e7ce0' }, // 文字颜色
                },
                alignment: { // 设置居中
                  horizontal: 'center', // 水平（向左、向右、居中）
                  vertical: 'center', // 上下（向上、向下、居中）
                  wrapText: false, // 设置单元格自动换行，目前仅对非合并单元格生效
                  indent: 0 // 设置单元格缩进
                },
              },
            }
          }
          // 匹配表格第二行（A2 B2 C2 D2...），设置其样式
          else if (key.match(/\d+/g).join('') == '2') {
            workSheet[key].s = {
              border: {
                top: {
                  style: 'thin',
                },
                bottom: {
                  style: 'thin',
                },
                left: {
                  style: 'thin',
                },
                right: {
                  style: 'thin',
                },
              },
              fill: { // 设置背景色
                fgColor: { rgb: 'eeeeee' },
              },
              font: { // 设置字体
                name: '微软雅黑', // 字体名称
                sz: 10, // 字体大小
              },
              alignment: {
                horizontal: 'center', // 水平（向左、向右、居中）
                vertical: 'center', // 上下（向上、向下、居中）
                wrapText: false, // 设置单元格自动换行，目前仅对非合并单元格生效
                indent: 0 // 设置单元格缩进
              }
            }
          }
          // 匹配表格中除了 B1 B2 的 B 列单元格，以及除了 C1 C2 的 C 列单元格，设置其样式
          else if ((key != 'B1' && key != 'B2' && key.indexOf('B') > -1) || (key != 'C1' && key != 'C2' && key.indexOf('C') > -1)) {
            workSheet[key].s = {
              border: {
                top: {
                  style: 'thin',
                },
                bottom: {
                  style: 'thin',
                },
                left: {
                  style: 'thin',
                },
                right: {
                  style: 'thin',
                },
              },
              fill: { // 设置背景色
                fgColor: { rgb: 'ffffff' },
              },
              font: { // 设置字体
                name: '微软雅黑', // 字体名称
                sz: 10, // 字体大小
              },
              alignment: {
                horizontal: 'left', // 水平（向左、向右、居中）
                vertical: 'center', // 上下（向上、向下、居中）
                wrapText: true, // 设置单元格自动换行，目前仅对非合并单元格生效
                indent: 1 // 设置单元格缩进
              }
            }
          }
          // 匹配表格中除了 G1 G2 的 G 列单元格，设置其样式
          else if (key != 'G1' && key != 'G2' && key.indexOf('G') > -1) {
            workSheet[key].s = {
              border: {
                top: {
                  style: 'thin',
                },
                bottom: {
                  style: 'thin',
                },
                left: {
                  style: 'thin',
                },
                right: {
                  style: 'thin',
                },
              },
              fill: { // 设置背景色
                fgColor: { rgb: 'ffffff' },
              },
              font: { // 设置字体
                name: '微软雅黑', // 字体名称
                sz: 10, // 字体大小
              },
              alignment: {
                horizontal: 'center', // 水平（向左、向右、居中）
                vertical: 'center', // 上下（向上、向下、居中）
                wrapText: false, // 设置单元格自动换行，目前仅对非合并单元格生效
                indent: 0 // 设置单元格缩进
              }
            }
 
            if (workSheet[key].v == '待审核') {
              workSheet[key].s.font.color = { rgb: '1a44d7' }
            } else if (workSheet[key].v == '审核已通过') {
              workSheet[key].s.font.color = { rgb: '4ab913' }
            } else if (workSheet[key].v == '审核未通过') {
              workSheet[key].s.font.color = { rgb: 'ed143d' }
            } else {
              workSheet[key].s.font.color = { rgb: '000000' }
            }
          }
          // 匹配表格中除了 H1 H2 的 H 列单元格，设置其样式
          else if (key != 'H1' && key != 'H2' && key.indexOf('H') > -1) {
            workSheet[key].s = {
              border: {
                top: {
                  style: 'thin',
                },
                bottom: {
                  style: 'thin',
                },
                left: {
                  style: 'thin',
                },
                right: {
                  style: 'thin',
                },
              },
              fill: { // 设置背景色
                fgColor: { rgb: 'ffffff' },
              },
              font: { // 设置字体
                name: '微软雅黑', // 字体名称
                sz: 10, // 字体大小
              },
              alignment: {
                horizontal: 'center', // 水平（向左、向右、居中）
                vertical: 'center', // 上下（向上、向下、居中）
                wrapText: false, // 设置单元格自动换行，目前仅对非合并单元格生效
                indent: 0 // 设置单元格缩进
              }
            }
 
            if (workSheet[key].v == '待上架') {
              workSheet[key].s.font.color = { rgb: '1a44d7' }
              workSheet[key].s.fill.fgColor = { rgb: 'eff2fc' }
            } else if (workSheet[key].v == '正常') {
              workSheet[key].s.font.color = { rgb: '4ab913' }
              workSheet[key].s.fill.fgColor = { rgb: 'f0f9eb' }
            } else if (workSheet[key].v == '已下架') {
              workSheet[key].s.font.color = { rgb: 'ed143d' }
              workSheet[key].s.fill.fgColor = { rgb: 'fef0f0' }
            } else {
              workSheet[key].s.font.color = { rgb: '000000' }
              workSheet[key].s.fill.fgColor = { rgb: 'ffffff' }
            }
          }
          // 其它单元格，设置其样式
          else {
            workSheet[key].s = {
              border: {
                top: {
                  style: 'thin',
                },
                bottom: {
                  style: 'thin',
                },
                left: {
                  style: 'thin',
                },
                right: {
                  style: 'thin',
                },
              },
              fill: { // 设置背景色
                fgColor: { rgb: 'ffffff' },
              },
              font: { // 设置字体
                name: '微软雅黑', // 字体名称
                sz: 10, // 字体大小
              },
              alignment: {
                horizontal: 'center', // 水平（向左、向右、居中）
                vertical: 'center', // 上下（向上、向下、居中）
                wrapText: false, // 设置单元格自动换行，目前仅对非合并单元格生效
                indent: 0 // 设置单元格缩进
              }
            }
          }
        }
      }
      console.log('workSheet =>', workSheet)
 
      // 八、在工作簿中添加工作表
      XLSX.utils.book_append_sheet(workBook, workSheet, '第一页')
 
      // 九、使用 xlsx-style 写入文件方式，使得自定义样式生效
      const tmpDown = new Blob([
        this.s2ab(
          XLSX_STYLE.write(workBook, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'binary',
            cellStyles: true,
          })
        ),
      ])
 
      // 十、导出 Excel 文件
      const date = new Date()
      const formattedDate =
        `` +
        `${date.getFullYear()}` + // 年
        `${(date.getMonth() + 1).toString().padStart(2, '0')}` + // 月
        `${date.getDate().toString().padStart(2, '0')}` + // 日
        `${date.getHours().toString().padStart(2, '0')}` + // 时
        `${date.getMinutes().toString().padStart(2, '0')}` + // 分
        `${date.getSeconds().toString().padStart(2, '0')}` + // 秒
        ``.trim()
      this.downloadExcelFile(tmpDown, '年度最新爆款商品列表 - ' + formattedDate + '.xlsx')
    },
 
    /**
     * 准备数据
     */
    getExportDataList() {
      const thList = [
        '商品ID',
        '商品名称',
        '商品描述',
        '规格',
        '库存',
        '责任人',
        '是否审核',
        '商品状态',
        '创建时间',
        '修改时间',
      ]
 
      const keyList = [
        'id',
        'name', 
        'desc',
        'spec', 
        'num', 
        'principal', 
        'isApproved', 
        'status', 
        'createTime',
        'updateTime',
      ]
 
      const targetList = [
        {
          id: 1,
          name: '乐事真脆薯条', 
          desc: '百事旗下产品，好吃又好玩！',
          spec: '单位/包', 
          num: 666, 
          principal: '全哥',
          isApproved: '审核已通过', 
          status: 0, 
          createTime: '2023-06-08 22:13:46',
          updateTime: '2023-06-08 22:15:18',
        },
        {
          id: 2,
          name: '干脆面', 
          desc: '味道好极了 ~',
          spec: '单位/箱', 
          num: 123, 
          principal: '全哥',
          isApproved: '审核已通过', 
          status: 1, 
          createTime: '2023-06-08 22:13:46',
          updateTime: '2023-06-08 22:15:18',
        },
        {
          id: 3,
          name: '双汇火腿肠', 
          desc: 'Good！！！',
          spec: '单位/包', 
          num: 666, 
          principal: '全哥',
          isApproved: '审核已通过', 
          status: 2, 
          createTime: '2023-06-08 22:13:46',
          updateTime: '2023-06-08 22:15:18',
        },
        {
          id: 4,
          name: '曲奇饼', 
          desc: '美味。',
          spec: '单位/盒', 
          num: 666, 
          principal: '全哥',
          isApproved: '待审核', 
          status: 1, 
          createTime: '2023-06-08 22:13:46',
          updateTime: '2023-06-08 22:15:18',
        },
        {
          id: 5,
          name: '香飘飘奶茶', 
          desc: 'Yeah',
          spec: '单位/包', 
          num: 666, 
          principal: '全哥',
          isApproved: '审核未通过', 
          status: 2, 
          createTime: '2023-06-08 22:13:46',
          updateTime: new Date(),
        }
      ]
 
      const tdList = this.formatJson(keyList, targetList) // 过滤字段以及转换数据格式，即：表格数据
      tdList.unshift(thList) // 将 thList 数组添加到 tdList 数组开头，即：表格头部
      tdList.unshift(['']) // 将空字符串数组添加到 tdList 数组开头，即：表格首行
      const list = tdList
      return list
    },
 
    /**
     * 过滤字段以及转换数据格式
     */
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(item => {
        if (item === 'name') {
          if (v['name'] != null && v['name'] != '') {
            return v[item].split(';').join('\n')
          } else {
            return '-'
          }
        }
        else if (item === 'status') {
          if (v['status'] != null && v['status'] == 0) {
            return '正常'
          } else if (v['status'] != null && v['status'] == 1) {
            return '待上架'
          } else if (v['status'] != null && v['status'] == 2) {
            return '已下架'
          } else {
            return '-'
          }
        }
        else {
          return v[item]
        }
      }))
    },
 
    /**
     * 使用二维数组生成一个工作表
     */
    sheet_from_array_of_arrays(data, opts) {
      var ws = {};
      var range = {
        s: {
          c: 10000000,
          r: 10000000
        },
        e: {
          c: 0,
          r: 0
        }
      }
 
      for (var R = 0; R != data.length; ++R) {
        for (var C = 0; C != data[R].length; ++C) {
          if (range.s.r > R) range.s.r = R;
          if (range.s.c > C) range.s.c = C;
          if (range.e.r < R) range.e.r = R;
          if (range.e.c < C) range.e.c = C;
          var cell = {
            v: data[R][C]
          };
          if (cell.v == null) continue;
          var cell_ref = XLSX.utils.encode_cell({
            c: C,
            r: R
          })
 
          if (typeof cell.v === 'number') cell.t = 'n';
          else if (typeof cell.v === 'boolean') cell.t = 'b';
          else if (cell.v instanceof Date) {
            cell.t = 'n';
            cell.z = XLSX.SSF._table[14];
            cell.v = this.date_num(cell.v);
            // cell.z = 'YYYY-MM-DD'
            cell.z = 'YYYY-MM-DD HH:mm:ss'
          } else cell.t = 's'
 
          ws[cell_ref] = cell
        }
      }
 
      if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
      return ws
    },

    /**
     * 日期转换
     */
    date_num(v, date1904) {
      if (date1904) {
        v += 1462;
      }
      var epoch = Date.parse(v);
      return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
    },
 
    /**
     * 文件流转换
     */
    s2ab(s) {
      if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf);
        for (let i = 0; i != s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xff
        }
        return buf
      } else {
        const buf = new Array(s.length)
        for (let i = 0; i != s.length; ++i) {
          buf[i] = s.charCodeAt(i) & 0xff
        }
        return buf
      }
    },
 
    /**
     * 使用 a 标签下载文件
     */
    downloadExcelFile(obj, fileName) {
      const a_node = document.createElement('a')
      a_node.download = fileName
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(obj, fileName)
      } else {
        a_node.href = URL.createObjectURL(obj)
      }
      a_node.click()
      setTimeout(() => {
        URL.revokeObjectURL(obj)
      }, 2000)
    },
  }
}
</script>

四、效果如下 ~

Yaiba123
关注
专栏目录
Vue - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、ElementUI 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）
王佳斌
02-21 2997
vue2，excel，xls，电子表格，ant design vue，elementUI，table表格导出，将网页上的表格原封不动的导出成excel，vue2如何将组件库的表格导出excel，vue将页面上的表格导出，实现导出表格并合并单元格，vue+element表格导出为Excel文件，无法导出很复杂表格怎么办，vue2导出复杂表格，表格很复杂用什么办法能导出为xls文件，纯前端导出，所见所得导出表格，vue2表格很多合并行和列怎么导出成excel，复杂表格多行多列合并的导出，Vue导出复杂excel
xlsx-style实现表格下载
12-17
支持设置单元格样式\支持设置单元格行宽\支持设置单元格合并\支持设置单元格表头区分\支持设置导出上千条数据
vue使用xlsx和xlsx-style导出excel文件
最新发布
yhlhelloworld的博客
09-21 386
打开node_ modules报找到xlsx，复制xlsx.full.min.js文件。打开项目根目录的vue.config.js文件，写入以下代码。这俩库也是个奇葩，同时导入一起使用还报错。然后解决xlsx-style的报错问题。引入到html文件中。
超详细纯前端导出excel并完成各种样式的修改（xlsx-style）
weixin_51947053的博客
10-17 1万+
最近做的项目涉及到了excel的导出，起初需求是不需要样式层面的修改的，所以选择了XLSX.JS，没有过多的去考虑样式的修改。
xlsx-style的用法
热门推荐
Yuoliku的博客
10-22 2万+
如何通过xlsx-style 修改导出excel的样式 实现导出的excel是带有边框的，满足打印的时候可以尽可能的铺满A纸 安装 xlsx-style npm install xlsx-style --save 修改xlsx-style 源码 解决报错 在\node_modules\xlsx-style\dist\cpexcel.js var cpt = require('./cpt' + 'able'); 改为 var cpt = cptable; 修改vue中的代码 import X
前端导出表格 修改样式（xlsx-style）用法
notagoodwriter的博客
02-24 8024
前端导出表格 修改样式（xlsx-style）用法
Vue之xlsx的使用
qq_43548590的博客
10-09 1万+
Vue之xlsx的使用
xlsx-js-style导出Demo,纯前端带样式导出表格数据
09-01
纯前端导出,xlsx.js只能导出不能携带样式，所以我们用了xlsx-js-style插件,可以实现带样式的前端导出表格,样式可自定义，表格背景颜色、字体颜色、表格行高、表格行宽等等都可以自行设置，导出速度快，实现可以自己...
vue+element并使用xlsx实现导出excel
06-14
而XLSX库则是一个用于处理Excel文件的强大工具，能够帮助开发者实现数据导入导出的功能。这篇教程将详细介绍如何在Vue.js项目中结合Element UI和XLSX库来实现Excel的导出功能。 首先，你需要确保已经安装了Vue.js、...
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）
08-30
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js...
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
Vue2.0 + Element UI 中 el-table 数据...Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法可以使用 XLSX 库和 FileSaver 库来实现。通过安装依赖项、编写代码和执行方法，可以将表格数据导出到 Excel 文件中。
2024年最新！xlsx、xlsx-style导出excel文件列宽、行高、样式、合并表格一步到位！
m0_58753305的博客
01-15 3659
下载导出excel文件，能添加列宽、行高、背景色、字体等样式，能合并表格。遇到的问题都附上了解决方案。
xlsx-style使用(导出表格及修改单元格样式)
Exclison的博客
04-22 1万+
xlsx-style使用(导出表格及修改单元格样式) 针对导出表格 需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式 安装 npm install xlsx-style --save vue安装后导入可能会报错 Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx 这里附一个解决方案xlsx-style报错 编写工作簿 /* 文件类型 bookType 可以是 'xlsx' or 'xlsm' or 'xlsb' */ va
xlsx xlsx-style 使用和坑记录
qq_33715850的博客
02-01 1579
xlsx xlsx-style 使用和坑记录
【笔记】Vue中 xlsx-style 导出样式excel的学习和使用
juan_uper的博客
10-12 3336
可供参考的xlsx-style封装方法，通过数据源生成excel，简单解析wb对象，可修改样式，合并单元格等操作
vite项目中使用xlsx-style
qq_44376306的博客
03-19 1883
是前端操作Excel以及类似的二维表的最佳选择之一，而是它的社区版本。其功能强大，支持xls、xlsx、ods等十几种格式。npm库名称为xlsx，node库也叫node-xlsx，。而xlsx-style 来源于SheetJs/xlsx，并在其非付费版上添加了很多功能，其中最主要的功能是设置excel 的样式。
js-xlsx/xlsx-style 纯前端数据导出Excel且支持自定义样式
weixin_38649188的博客
12-01 1万+
前端开发过程中经常遇到导出excel的需求。这种情况大多数都是服务端处理数据(QAQ至少我遇到的大多数都是这样)，然后返回一个链接，前端不需要管服务端怎么操作直接打开这个链接(window.location.href = url;)就能下载excel了。 但是事情往往没有那么简单，当表格数据不多，且没有分页的时候，服务端往往会把导出excel的操作扔给前端。。。。前端导出excel的情况也不少，经常做了就过了，现在整理出来分享下 效果图如下： 一开始我用的是**js-xlsx插件做的，这个导出基本的表格
利用xlsx-style实现前端导出excle表并修改样式
开源世界
04-20 2552
最近接二开的项目当中，客户要求页面上有下载excle模板的按钮，并提供输入数据的基本模板 本来项目中一些数据量较大的导出确实是后台来做的。但是有些数据较少的，比如这种只是模板的excle表生成，前端也是可以来实现的。 项目本来用的是xlsx实现的导出，但是这个插件只支持基本的数据导出，不支持样式的修改，所以这里又安装了xlsx-style和 file-saver的依赖 npm install xlsx --save npm install xlsx-style --save npm
表格导出使用xlsx-style-vite修改导出样式
Gardent_的博客
03-12 941
最近项目需求让封装一个公共表格导出组件，项目是vue3+vite+ts搭建的，最初下载xlsx-style总是报错，查到有让改依赖解决报错问题的感觉不实用后续再次下载依赖还会出问题，靠扰了一天没有解决修改样式的问题，后续突然发现了xlsx-style-vite完美解决导出样式问题。
vue3+ts xlsx-style-vite修改导出excel表格字体颜色
06-07
要修改导出的 Excel 表格的字体颜色，你可以使用 xlsx-style 库提供的 `XLSXStyle` 类的 `createStyle` 方法来创建自定义样式，然后将其应用到单元格中。 下面是一个使用 Vue 3 + TypeScript 和 xlsx-style-vite 库的示例代码： ```typescript <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { utils, writeFile } from 'xlsx-style-vite'; import { XLSXStyle } from 'xlsx-style-vite/xlsx-style'; export default defineComponent({ methods: { exportExcel() { const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ]; const workbook = utils.book_new(); const worksheet = utils.aoa_to_sheet(data); // 创建自定义样式 const style = XLSXStyle.createStyle({ font: { color: '#FF0000' } }); // 将样式应用到单元格 utils.sheet_set_cell_style(worksheet, 'A1:C1', style); utils.book_append_sheet(workbook, worksheet, 'Sheet1'); writeFile(workbook, 'example.xlsx'); } } }); </script> ``` 在上面的代码中，我们首先创建了一个包含一些数据的数组 `data`。然后，我们使用 `utils.aoa_to_sheet` 方法将该数组转换为一个工作表对象。接着，我们使用 `XLSXStyle.createStyle` 方法创建了一个包含字体颜色为红色的自定义样式，并使用 `utils.sheet_set_cell_style` 方法将该样式应用到了表头行的所有单元格上。最后，我们将工作表对象添加到工作簿中，使用 `writeFile` 方法将工作簿导出为一个 Excel 文件。 需要注意的是，在使用 xlsx-style-vite 库时，要使用 `XLSXStyle` 类来创建自定义样式，这与原生的 xlsx-style 库有所不同，所以要引入 `xlsx-style-vite/xlsx-style` 模块。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值