vue3+vite项目 使用xlsx-style-vite 导出自定义单元格/边框颜色/背景色

原创 已于 2025-03-14 14:33:40 修改 · 894 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #webstorm #vscode #vue #vite #前端框架 #typescript

于 2025-03-12 14:46:57 首次发布

目录

准备工作：

1.安装依赖

2.解决：导出excel合并单元格后边框缺失问题

3.单元格样式/边框颜色/背景色/文字 等样式 设置

4.先看一下 我这里是封装导出方法来做的，不需要封装的可直接放到页面中去

这里有三种形式：

1.使用tableId 直接导出页面所显示表格

表格ui图

完整代码

导出结果

2.使用tableId 导出 带有合计行 的表格（带有合计行并且有多级表头 底部合计行会显示错乱）

详解：参数分解

完整代码

表格ui图:原图表格数据较长 这里显示了3分之1

导出结果：

3.自定义表头/表格内容 处理成二维数组格式 导出

参数详解

完整代码

表格ui图：

导出结果：

准备工作：

1.安装依赖/引入页面
npm install xlsx xlsx-style-vite file-saver --save
# 或
yarn add xlsx xlsx-style-vite file-saver

import * as XLSX from "xlsx"; //默认导出无法修改样式
import FileSaver from "file-saver";
// @ts-ignore
import * as XLSX_STYLE from "xlsx-style-vite"; // 需要自定义样式 必须安装
2.解决：导出excel合并单元格后边框缺失问题
//第一种 直接根据表格id  $table 导出excel
let ws = XLSX.utils.table_to_sheet(document.querySelector($table));  //表格id $table
//第二种 自己转化自定义数据 转化为二维数组 data 再导出excel
let ws = XLSX.utils.aoa_to_sheet(data) //data 二维数组

const mergeCell = (ws) => {
    const borderStyle = {
        top: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        bottom: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        left: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        right: {style: 'thin', color: {rgb: 'CCCCCCCC'}}
    };
// 遍历所有单元格，确保合并区域每个单元格都有边框
    const range = XLSX.utils.decode_range(ws['!ref']);
    for (let R = range.s.r; R <= range.e.r; R++) {
        for (let C = range.s.c; C <= range.e.c; C++) {
            const cellAddr = XLSX.utils.encode_cell({r: R, c: C});
            if (!ws[cellAddr]) ws[cellAddr] = {};
            ws[cellAddr].s = {...ws[cellAddr].s, border: borderStyle};  // 显式设置边框‌:ml-citation{ref="4,8" data="citationList"}
        }
    }
    return ws
};
3.单元格样式/边框颜色/背景色/文字 等样式 设置
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'}},
  },
  alignment: {
    horizontal: 'center',//水平居中对齐
      vertical: 'center',//垂直居中
      wrapText: true,//自动换行
  },
  fill: {
    fgColor: { rgb: 'cccccc' },
  },
}
4.先看一下 我这里是封装导出方法来做的，不需要封装的可直接放到页面中去

这里有三种形式：

1.使用tableId 直接导出页面所显示表格
表格ui图

完整代码

导出按钮 以及参数详解

<script lang="ts" name="trafficStatistics" setup>
//导出exc
const exportAllBtn = () => {
  //参数1：表格数据 id或者 class
  //参数2：导出文件名 自定义
  //参数3：是否是多级表头
  //参数4：是否是需要添加表格样式
  complexTableStyle('#dailyTrafficTable','流量统计表.xlsx',true,true)
};
</script>

 封装的公共导出代码

import {h} from "vue";
import * as XLSX from "xlsx";
import FileSaver from "file-saver";
// @ts-ignore
import * as XLSX_STYLE from "xlsx-style-vite";
/**
 ************************************** 导出 start ************************************************
 */
//表格样式
const setPubExcel = (data) => {
    data["!cols"] = [];
    const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows'];
    for (let key in data) {
       //data["!cols"].push({ wpx: 180 }); //给单元格添加宽度 可以自己判断文字有多少给出对应的宽度
        if (data.hasOwnProperty(key)) {
            if (!excludes.includes(key)) {
                console.log(data)
                data[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'}},
                    },
                    alignment: {
                        horizontal: 'center',//水平居中对齐
                        vertical: 'center',//垂直居中
                        wrapText: true,//是否换行
                    },
                    fill: {
                        fgColor: { rgb: 'cccccc' },
                    },
                }
            }
        }
    }
};
// 合并行列样式
const mergeCell = (ws) => {
    const borderStyle = {
        top: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        bottom: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        left: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        right: {style: 'thin', color: {rgb: 'CCCCCCCC'}}
    };
// 遍历所有单元格，确保合并区域每个单元格都有边框
    const range = XLSX.utils.decode_range(ws['!ref']);
    for (let R = range.s.r; R <= range.e.r; R++) {
        for (let C = range.s.c; C <= range.e.c; C++) {
            const cellAddr = XLSX.utils.encode_cell({r: R, c: C});
            if (!ws[cellAddr]) ws[cellAddr] = {};
            ws[cellAddr].s = {...ws[cellAddr].s, border: borderStyle};  // 显式设置边框‌:ml-citation{ref="4,8" data="citationList"}
        }
    }
    return ws
};
//字符串转ArrayBuffer
const s2ab = (s) => {
    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;
};

/**
 *导出 一般/复杂 表格  按照显示的表格所导出，不需要自定义表头
 *可参考 复杂表格：统计-日流量统计 一般表格：统计- 机场架次航班流量统计表
 * 参数1：表格数据 id或者 class
 * 参数2：导出文件名 自定义
 * 参数3：是否是需要添加表格样式          默认：添加表格样式
 * 参数4：是否是需要添加合并单元格表格样式  默认：添加合并单元格表格样式
 * 参数5：是否有合计行                  默认 false
 * 参数6：表头合并了几行+一页多少条       默认：0 当有合计行时 须传
 */
// 直接导出一般/多级表头 表格数据
export function complexTableStyle($table, name, setPub = true, merge = true) {
    let workbook = XLSX.utils.book_new();
    let wb = XLSX.utils.table_to_sheet(document.querySelector($table));
    //下面直接放wb数据 可直接使用 自测
    XLSX.utils.book_append_sheet(workbook, wb, 'Sheet1');
    if (setPub) setPubExcel(wb); //默认带 表格样式
    if (merge) mergeCell(wb) //默认带 合并单元格表格样式
    let wBout = XLSX_STYLE.write(workbook, {bookType: 'xlsx', bookSST: false, type: 'binary',});
    FileSaver.saveAs(new Blob([s2ab(wBout)], {type: 'application/octet-stream;charset=utf-8"'}), `${name}`)
}
/**
 ************************************** 导出 end ************************************************
 */
导出结果

整体表格加了 背景色 边框 （可遍历数组给指定单元格加样式）

2.使用tableId 导出 带有合计行 的表格（带有合计行并且有多级表头 底部合计行会显示错乱）
详解：参数分解

完整代码

可以不使用组件 组件中的方法直接放到页面中就可以

导出按钮执行方法

<script lang="ts" name="airportSupportFlight" setup> 
  import {complexTableSum} from '/@/utils/common'; //引入组件
  //导出excel
  const exportAllBtn = () => {
    // 参数1：表格数据 id或者 class
    // 参数2：导出文件名 自定义
    // 参数3：是否是需要添加表格样式          默认：添加表格样式
    // 参数4：是否是需要添加合并单元格表格样式  默认：添加合并单元格表格样式
    // 参数5：是否有合计行                  默认 false
    // 参数6：表头合并了几行+一页多少条       默认：0 当有合计行时 须传
    complexTableSum('#airportSupportFlight','机场保障航班架次-自定义.xlsx',true,true,true,paginationData.pageSize + 3)
  };
</script>

封装组件公共代码

import {h} from "vue";
import * as XLSX from "xlsx";
import FileSaver from "file-saver";
// @ts-ignore
import * as XLSX_STYLE from "xlsx-style-vite";

/**
 ************************************** 导出 start ************************************************
 */
//表格样式
const setPubExcel = (data) => {
    console.log(8, data)
    data["!cols"] = [];
    const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows'];
    for (let key in data) {
             //data["!cols"].push({ wpx: 180 }); //给单元格添加宽度 可以自己判断文字有多少给出对应的宽度
        if (data.hasOwnProperty(key)) {
            if (!excludes.includes(key)) {
                data[key].s = {
                    border: {
                        top: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                        bottom: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                        left: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                        right: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                    },
                    alignment: {
                        horizontal: 'center',//水平居中对齐
                        vertical: 'center',//垂直居中
                        wrapText: true,//是否换行
                    },
                    fill: {
                        // fgColor: { rgb: '0070C0' },//背景色
                    },
                }
            }
        }
    }
};
// 合并行列样式
const mergeCell = (ws) => {
    const borderStyle = {
        top: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        bottom: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        left: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        right: {style: 'thin', color: {rgb: 'CCCCCCCC'}}
    };
// 遍历所有单元格，确保合并区域每个单元格都有边框
    const range = XLSX.utils.decode_range(ws['!ref']);
    for (let R = range.s.r; R <= range.e.r; R++) {
        for (let C = range.s.c; C <= range.e.c; C++) {
            const cellAddr = XLSX.utils.encode_cell({r: R, c: C});
            if (!ws[cellAddr]) ws[cellAddr] = {};
            ws[cellAddr].s = {...ws[cellAddr].s, border: borderStyle};  // 显式设置边框‌:ml-citation{ref="4,8" data="citationList"}
        }
    }
    return ws
};
//字符串转ArrayBuffer
const s2ab = (s) => {
    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;
};

/**
 *导出 一般/复杂 表格  按照显示的表格所导出，不需要自定义表头
 *可参考 复杂表格：统计-日流量统计 一般表格：统计- 机场架次航班流量统计表
 * 参数1：表格数据 id或者 class
 * 参数2：导出文件名 自定义
 * 参数3：是否是需要添加表格样式          默认：添加表格样式
 * 参数4：是否是需要添加合并单元格表格样式  默认：添加合并单元格表格样式
 * 参数5：是否有合计行                  默认 false
 * 参数6：表头合并了几行+一页多少条       默认：0 当有合计行时 须传
 */
// 直接导出表格数据 + 合计行
export function complexTableSum($table, name, setPub = true, merge = true, getSummaries = false, numRow = 0) {
    let workbook = XLSX.utils.book_new();
    let wb = XLSX.utils.table_to_sheet(document.querySelector($table));
    XLSX.utils.book_append_sheet(workbook, wb, 'Sheet1');
    if (getSummaries) { //有合计行
        let mergesAll = wb['!merges']
        let merges = []
        for (let i in mergesAll) {
            if (mergesAll[i].s.r < numRow) {
                merges.push(mergesAll[i])
            }
        }
        wb['!merges'] = merges
    }
    if (setPub) setPubExcel(wb); //默认带 表格样式
    if (merge) mergeCell(wb) //默认带 合并单元格表格样式
    let wBout = XLSX_STYLE.write(workbook, {bookType: 'xlsx', bookSST: false, type: 'binary',});
    FileSaver.saveAs(new Blob([s2ab(wBout)], {type: 'application/octet-stream;charset=utf-8"'}), `${name}`)
}
/**
 ************************************** 导出 end ************************************************
 */
表格ui图:原图表格数据较长 这里显示了3分之1

导出结果：

3.自定义表头/表格内容 处理成二维数组格式 导出
参数详解

完整代码

导出执行方法 这里写死了二维数组 做测试用


//导出exc 这里只做测试 写死数据
const exportAllBtn = () => {
  //自定义的表头  需要自行转换格式  
  let allHeader = [
    [
      "离港正常率排名",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "原因"
    ],
    [
      "离港机场",
      "排名",
      "所属航空公司",
      "航班号",
      "起落机场及时刻",
      "计划航班数",
      "正常航班数",
      "航班正常率",
      "公司",
      "天气",
      "空管",
      "军事",
      "时刻",
      "其他",
      ""
    ]
  ]
  //多级表头 合集prop
  let filterVal = [
    "flno",
    "flno",
    "flno",
    "flno",
    "flno",
    "qchb",
    "flystart",
    "flyend",
    "delayreason",
    "delay1",
    "godelay",
    "godelay",
    "godelay",
    "godelay",
    "reason"
] 
  //表格数据
  let dataList = [
  {flno:'11',"qchb":'222',"delay1":'333',"godelay":'444','reason':''},
  {flno:'11',"qchb":'222',"delay1":'333',"godelay":'444','reason':''}
]
  //合并单元格数据
  let merges = ['A1:N1', 'O1:O2'] 
  complexTableCustomStyle(allHeader, dataList, filterVal, '四大机场国内离港正常率排名后三位航班统计表.xlsx', merges)
};

封装组件公共代码

import * as XLSX from "xlsx";
import FileSaver from "file-saver";
// @ts-ignore
import * as XLSX_STYLE from "xlsx-style-vite";

/**
 ************************************** 导出 start ************************************************
 */
//处理数据格式为二维数组
const formatJson = function (filterVal, list) {
    return list.map((v, i) => filterVal.map(j => {
        return v[j]
    }))
}
//表格样式
const setPubExcel = (data) => {
    data["!cols"] = [];
    const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows'];
    for (let key in data) {
             //data["!cols"].push({ wpx: 180 }); //给单元格添加宽度 可以自己判断文字有多少给出对应的宽度

        if (data.hasOwnProperty(key)) {
            if (!excludes.includes(key)) {
                data[key].s = {
                    border: {
                        top: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                        bottom: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                        left: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                        right: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
                    },
                    alignment: {
                        horizontal: 'center',//水平居中对齐
                        vertical: 'center',//垂直居中
                        wrapText: true,//是否换行
                    },
                    fill: {
                        // fgColor: { rgb: '0070C0' },
                    },
                }
            }
        }
    }
};
// 合并行列样式
const mergeCell = (ws) => {
    const borderStyle = {
        top: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        bottom: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        left: {style: 'thin', color: {rgb: 'CCCCCCCC'}},
        right: {style: 'thin', color: {rgb: 'CCCCCCCC'}}
    };
// 遍历所有单元格，确保合并区域每个单元格都有边框
    const range = XLSX.utils.decode_range(ws['!ref']);
    for (let R = range.s.r; R <= range.e.r; R++) {
        for (let C = range.s.c; C <= range.e.c; C++) {
            const cellAddr = XLSX.utils.encode_cell({r: R, c: C});
            if (!ws[cellAddr]) ws[cellAddr] = {};
            ws[cellAddr].s = {...ws[cellAddr].s, border: borderStyle};  // 显式设置边框‌:ml-citation{ref="4,8" data="citationList"}
        }
    }
    return ws
};
//字符串转ArrayBuffer
const s2ab = (s) => {
    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;
};

/**
 *导出 复杂表格  自定义表头格式  多级表头
 *可参考 正常性统计-正常性统计
 *参数1：表格表头数据       tableHeader
 *参数2：表格数据          list
 *参数3：多级表头 合集prop  filterVal
 *参数4：导出文件名         name
 *参数5：合并单元格数据      merges
 */
// 自己处理数据为 二维数组 格式 自定义表头/内容
export function complexTableCustomStyle(tableHeader, list, filterVal, name, merges) {
    const data = [...formatJson(filterVal, list)]
    data.unshift(tableHeader[1]);
    data.unshift(tableHeader[0]);
    let wb = XLSX.utils.book_new() //新建工作簿
    let ws = XLSX.utils.aoa_to_sheet(data) //data 二维数组-----将二维数组转换为工作表对象，自动处理数据类型
    if (merges.length > 0) { //处理合并单元格 这里手动写二维数组
        if (!ws['!merges']) ws['!merges'] = [];
        merges.forEach(item => {
            ws['!merges'].push(XLSX.utils.decode_range(item))
        })
    }
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1")  //将工作表插入到工作簿中
    mergeCell(ws)
    setPubExcel(ws);
    const wBout = XLSX_STYLE.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    FileSaver.saveAs(new Blob([s2ab(wBout)], {type: 'application/octet-stream;charset=utf-8"'}), `${name}`)
}

/**
 ************************************** 导出 end ************************************************
 */
表格ui图：

导出结果：

vue3+ts+xlsx、xlsx-populate页面上显示表格并导出excel
Missxu1895的博客
06-03 471
要用到的就是xlsx-populate，用它生成和页面上显示的一样的样式并且导出。以上代码就是如何在页面上展示的表格，接下来要说的就是如何导出excel表格，且导出的excel表格内容与页面上一致。以及如何导出pdf格式的内容。页面上需要显示一个数据的excel表格，样式为固定左侧两列和表头（如下图所示），导出的时候结构也要和页面上是一致的。3.数据拿到了以后要处理一下，把拿到的表头数据添加到tableData中，便于td遍历。以上就是小编要分享的关于xlsx进行导出展示的内容啦～2.如何导出pdf格式。
Vue3利用xlsx、xlsx-js-style导出Excel表格初步使用
一名业余前端的博客
03-05 2803
Vue3利用xlsx、xlsx-js-style导出Excel表格初步使用
解决vue3使用xlsx库导出excel，无法设置样式的问题
fakeend的博客
06-30 767
ps: 本文主要记录如何解决xlsx设置样式失效的问题！xlsx库没有样式要求的导出教程网上很多这里就不再赘述了。依赖下载：示例代码： 效果：
表格导出使用xlsx-style-vite修改导出样式
Gardent_的博客
03-12 1414
最近项目需求让封装一个公共表格导出组件，项目是vue3+vite+ts搭建的，最初下载xlsx-style总是报错，查到有让改依赖解决报错问题的感觉不实用后续再次下载依赖还会出问题，靠扰了一天没有解决修改样式的问题，后续突然发现了xlsx-style-vite完美解决导出样式问题。
vue3导入xlsx表格处理数据进行渲染
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
06-17 260
【前端表格导入实现方案】使用XLSX插件实现Excel文件上传解析，通过Vue3的el-upload组件触发文件选择，核心步骤包括：1)读取二进制文件内容；2)用XLSX解析工作簿数据；3)转换Sheet为JSON格式；4)按业务规则处理数据（跳过首尾行，提取特定列构建对象数组）；5)将处理后的数据赋值给表单对象进行页面渲染。关键点在于通过FileReader异步读取文件，以及利用XLSX的sheet_to_json方法转换表格数据，最后根据数据结构规律进行映射处理。文末还提供了多层嵌套数据的处理示例。
【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析，已实现
花椒和蕊的博客
08-15 5588
【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析，已实现
vite项目中使用xlsx-style
qq_44376306的博客
03-19 2174
是前端操作Excel以及类似的二维表的最佳选择之一，而是它的社区版本。其功能强大，支持xls、xlsx、ods等十几种格式。npm库名称为xlsx，node库也叫node-xlsx，。而xlsx-style 来源于SheetJs/xlsx，并在其非付费版上添加了很多功能，其中最主要的功能是设置excel 的样式。
vue3 -Ts-vite 使用xlsx-style-vite导出表格
qq_45260697的博客
10-14 353
在src目录下建立 shims-xlsx-style-vite.d.ts 文件，写入。使用vue3+ts+vite使用xlsx-style-vite导出表格功能。在ts文件中导入xlsx-style-vite功能报错。在tsconfig.json文件确保可以引入。
vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法
lee_amazing的博客
12-06 6218
基于vue3+vite的项目实现导出带有样式的excel表格，框架用的是vben，我的版本为 “xlsx”: “^0.16.9”, “xlsx-style”: “^0.8.13” “file-saver”: “^2.0.5”,
Vue3 项目中结合 Vite 和 Element Plus 导出 Excel 文件，使用 element-plus 的 ElTable 直接导出
最新发布
07-22
import { ref } from &#39;vue&#39; import * as XLSX from &#39;xlsx&#39; const tableRef = ref() const tableData = ref([ { date: &#39;2025-07-01&#39;, name: &#39;张三&#39;, address: &#39;北京市海淀区&#39; }, { date: &#39;2025-07-02&#39;, name: &#39;...
vue3+ts xlsx-style-vite修改导出excel表格字体颜色
06-07
要修改导出的 Excel 表格的字体颜色，你可以使用 xlsx-style 库提供的 `XLSXStyle` 类的 `createStyle` 方法来创建自定义样式，然后将其应用到单元格中。 下面是一个使用 Vue 3 + TypeScript 和 xlsx-style-vite 库...
vue+file-saver+xlsx+xlsx-style导出table为excel，自定义表格样式
Tkings233的博客
03-17 2195
vue实现file-saver+xlsx+xlsx-style导出table为excel，自定义表格样式
vue3前端excel导出；组件表格，自定义表格导出；Vue3 + xlsx + xlsx-style
MELANCHOLY ❤ ◁ ❚❚ ▷
02-20 3073
比如这种前端拼成的，又附带各种样式的表格（1）：合并单元格（2）：列宽（3）：背景色（4）：字体相关-大小粗细颜色字体等（5）：表格线，边框数据处理就不写了，数据处理为数组就可以了['左上表头','','','右上',''],['标题1','','','',''],['标题','测试合并','','',''],['固定标题','123','123','',''],['左下表头','','','右下',''],
vue3+vite项目如何使用xlsx结合xlsx-style-vite导出EXCEL
qq_42294411的博客
11-21 630
vue3+vite项目如何使用xlsx结合xlsx-style-vite导出EXCEL
vue3使用 xlsx-js-style导出Exce 动态合并表头
weixin_45653441的博客
09-06 710
本文介绍了如何使用xlsx-js-style插件实现带样式的Excel导出功能。首先通过npm安装xlsx-js-style插件，它是对xlsx的增强版，支持单元格样式调整。文章详细演示了数据处理流程：准备示例数据和列配置，将数据转换为二维数组，创建工作表，并设置单元格样式（包括边框、对齐方式等）。重点说明了如何动态合并表头单元格，最后生成并导出Excel文件。文中还提供了完整的Vue3实现代码，包含数据转换、样式设置和合并单元格等关键步骤，可直接用于实际项目开发。
xlsx，xlsx-style file-saver ,vue3+vite4+Excel导出解决方案
潜心
02-03 2443
这是我的三个依赖，用以上的三个库就可以完美输出样式excel，这里解释一下xlsx-style-hzx这是一个兼容vue3 的xlsx-style版本，开箱即用，香香。最近在迁移一个vue2项目到vue3，过程真的很曲折，我希望可以帮其他的vue3开发者节省一些时间。前端excel导出，并且希望有样式的话需要依赖三个插件。下面分享一下我的package-json 文件。
vite使用xlsx-style
weixin_44440116的博客
10-13 1834
Error: Could not dynamically require "./jszip". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.
xlsx xlsx-style-vite 实现前端根据element 表格导出excel且定制化样式 背景 列宽等
kzj0916的博客
10-17 659
先看下最终效果图吧，需要的可以参考我的实现方式这是最终导出的表格文件类似这种的，特定单元格需要额外标注，表头也有月份然后细分的，表格组件是这样的。
Vue2.0/Vue3.0使用xlsx+xlsx-style实现导出Excel文件
蜗牛快爬
09-01 1420
vue 导出excel
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值