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

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

一、导入依赖
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

四、效果如下 ~