vue3使用 xlsx-js-style导出Exce 动态合并表头

已于 2024-09-06 14:05:55 修改
阅读量275 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2024-09-06 14:05:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45653441/article/details/141958151
版权

安装插件
xlsx-js-style相当于xlsx的生基本，xlsx导出不能对单元格样式进行调整
安装了xlsx-js-style 就不需要安装 xlsx了

npm install xlsx-js-style

引入插件

import XLSXS from 'xlsx-js-style'

示例数据

  // 示例数据 data
            const data = [
                { transactionDate: '2024-01-01', '17lowerPriceDisplay': 100, '17upperPriceDisplay': 150, '17averagePriceDisplay': 120, xxxxx2: '12', xxxxx1: '11' },
                { transactionDate: '2024-01-02', '17lowerPriceDisplay': 110, '17upperPriceDisplay': 160, '17averagePriceDisplay': 125, xxxxx2: '12', xxxxx1: '11' },
            ]
// 示例 表格列

            const columns = [
                { title: '日期', dataIndex: 'transactionDate', width: 100, fixed: 'left' },
                { title: 'ssss', dataIndex: '17lowerPriceDisplay', colSpan: 0, width: 120 },
                { title: 'ssss', dataIndex: '17upperPriceDisplay', colSpan: 3, width: 120 },
                { title: 'ssss', dataIndex: '17averagePriceDisplay', colSpan: 0, width: 120 },
                { title: 'xxxxx', dataIndex: 'xxxxx1', colSpan: 0, width: 120 },
                { title: 'xxxxx', dataIndex: 'xxxxx2', colSpan: 0, width: 120 },
            ]

表格头
表格头对应的key

 const headers = columns.map(item => { return item.title })  
 const fields = columns.map(item => { return item.dataIndex })

数据转换 二维数组

let dataCopy = data.map((obj) => {
                return fields.map((field) => {
                    return obj[field]
                })
            })
            if (headers.length > 0) {
                dataCopy.splice(0, 0, headers)
            } else {
                dataCopy.splice(0, 0, fields)
            }

生成工作表

  const ws = XLSX.utils.aoa_to_sheet(dataCopy) // 创建工作表

单元格格式设置


            // 设置列宽度自适应
            const colWidths = columns.map(col => col.width || 100);
            ws['!cols'] = colWidths.map(width => ({ wpx: width }));

            // 设置内容居中
            // 设置单元格公共样式
            let borderAll = { //单元格外侧框线
                top: {
                    style: 'thin',
                },
                bottom: {
                    style: 'thin',
                },
                left: {
                    style: 'thin',
                },
                right: {
                    style: 'thin',
                }
            };

            for (let key in ws) {
                // 单元格公共样式设置
                if (ws[key] instanceof Object) {
                    ws[key].s = {
                        border: borderAll,
                        alignment: {
                            horizontal: 'center', //水平居中对齐
                            vertical: 'center',//垂直居中
                            wrapText: 1,//自动换行
                        },
                        // fill: { //背景色
                        //     fgColor: { rgb: 'dbf3f2' }
                        // },
                        font: {
                            sz: 12,//单元格中字体的样式与颜色设置
                            color: {
                                rgb: '000000'
                            }
                        },
                        bold: true,
                        numFmt: 0
                    }
                }
            }

动态合并列 导出excel

 // 记录合并单元格的信息
            const merges = [];
            let startCol = 0;
            let currentTitle = columns[0].title;

            // 确定合并区域
            columns.forEach((col, index) => {
                if (col.title === currentTitle) {
                    // 继续合并
                } else {
                    if (index - startCol > 1) {
                        // 如果需要合并的区域大于1列
                        merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: index - 1 } });
                    }
                    // 更新标题和起始列
                    currentTitle = col.title;
                    startCol = index;
                }
            });

            // 处理最后一个区域
            if (columns.length - startCol > 1) {
                merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: columns.length - 1 } });
            }

            // 应用合并区域到工作表
            ws['!merges'] = merges;

            // 创建工作簿
            const wb = XLSX.utils.book_new();
            console.log(wb, '创建工作簿')
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            // 导出 Excel 文件
            XLSX.writeFile(wb, 'export.xlsx');

完整代码 vue3

<template>
    <div>
        <button @click="exportExcel">导出 Excel</button>
    </div>
</template>

<script>
// import * as XLSX from 'xlsx'
import XLSX from 'xlsx-js-style'
export default {
    methods: {
        exportExcel() {
            // 示例数据
            const data = [
                { transactionDate: '2024-01-01', '17lowerPriceDisplay': 100, '17upperPriceDisplay': 150, '17averagePriceDisplay': 120, xxxxx2: '12', xxxxx1: '11' },
                { transactionDate: '2024-01-02', '17lowerPriceDisplay': 110, '17upperPriceDisplay': 160, '17averagePriceDisplay': 125, xxxxx2: '12', xxxxx1: '11' },
            ]

            // 列配置
            const columns = [
                { title: '日期', dataIndex: 'transactionDate', width: 100, fixed: 'left' },
                { title: 'ssss', dataIndex: '17lowerPriceDisplay', colSpan: 0, width: 120 },
                { title: 'ssss', dataIndex: '17upperPriceDisplay', colSpan: 3, width: 120 },
                { title: 'ssss', dataIndex: '17averagePriceDisplay', colSpan: 0, width: 120 },
                { title: 'xxxxx', dataIndex: 'xxxxx1', colSpan: 0, width: 120 },
                { title: 'xxxxx', dataIndex: 'xxxxx2', colSpan: 0, width: 120 },
            ]

            const fields = columns.map(item => { return item.dataIndex })
            const headers = columns.map(item => { return item.title })
            let dataCopy = data.map((obj) => {
                return fields.map((field) => {
                    return obj[field]
                })
            })
            if (headers.length > 0) {
                dataCopy.splice(0, 0, headers)
            } else {
                dataCopy.splice(0, 0, fields)
            }
            // 生成工作表
            // const ws = XLSX.utils.json_to_sheet(data, { header: columns.map(col => col.dataIndex) });
            const ws = XLSX.utils.aoa_to_sheet(dataCopy) // 创建工作表


            // 设置列宽度自适应
            const colWidths = columns.map(col => col.width || 100);
            ws['!cols'] = colWidths.map(width => ({ wpx: width }));

            // 设置内容居中
            // 设置单元格公共样式
            let borderAll = { //单元格外侧框线
                top: {
                    style: 'thin',
                },
                bottom: {
                    style: 'thin',
                },
                left: {
                    style: 'thin',
                },
                right: {
                    style: 'thin',
                }
            };

            for (let key in ws) {
                // 单元格公共样式设置
                if (ws[key] instanceof Object) {
                    ws[key].s = {
                        border: borderAll,
                        alignment: {
                            horizontal: 'center', //水平居中对齐
                            vertical: 'center',//垂直居中
                            wrapText: 1,//自动换行
                        },
                        // fill: { //背景色
                        //     fgColor: { rgb: 'dbf3f2' }
                        // },
                        font: {
                            sz: 12,//单元格中字体的样式与颜色设置
                            color: {
                                rgb: '000000'
                            }
                        },
                        bold: true,
                        numFmt: 0
                    }
                }
            }

            // 记录合并单元格的信息
            const merges = [];
            let startCol = 0;
            let currentTitle = columns[0].title;

            // 确定合并区域
            columns.forEach((col, index) => {
                if (col.title === currentTitle) {
                    // 继续合并
                } else {
                    if (index - startCol > 1) {
                        // 如果需要合并的区域大于1列
                        merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: index - 1 } });
                    }
                    // 更新标题和起始列
                    currentTitle = col.title;
                    startCol = index;
                }
            });

            // 处理最后一个区域
            if (columns.length - startCol > 1) {
                merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: columns.length - 1 } });
            }

            // 应用合并区域到工作表
            ws['!merges'] = merges;

            // 创建工作簿
            const wb = XLSX.utils.book_new();
            console.log(wb, '创建工作簿')
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            // 导出 Excel 文件
            XLSX.writeFile(wb, 'export.xlsx');
        }
    }
};
</script>
故事与九
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+xlsx+xlsx-style导出excel文件
weixin_51410591的博客
04-12 759
【代码】vue3+xlsx+xlsx-style导出excel文件。
使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号
m0_67372185的博客
06-06 2602
使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号
vue使用xlsx-js-style导出excel表格、合并表格及设置样式
qq_40837982的博客
07-07 5337
【代码】vue使用xlsx-js-style导出excel表格、合并表格及设置样式。
vue3 使用xlsx和xlsx-js-style 导出带有样式的xlsx文件
m0_46188775的博客
07-25 256
xlsx,xlsx-js-style导出携带样式，表头突出展示
Vue2.0/Vue3.0使用xlsx+xlsx-style实现导出Excel文件
蜗牛快爬
09-01 1282
vue 导出excel
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
03-22
以下是一个简化的示例代码片段，展示了如何使用SheetJS和xlsx-style创建一个带有样式的Excel表格： ```javascript const XLSX = require('xlsx-style'); // 定义数据和样式 const data = [ ['Name', 'Percentage'...
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）
08-30
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js...
js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改（添加标题，边框等），并且上传npm踩坑记录...
weixin_39758618的博客
12-20 1292
前段时间，我们项目提出一个前端导出Excel表格的需求，这个很简单，利用xlsx，file-saver很容易实现(网上很多教程)。后来需要加入标题，标题居中显示，加入边框等等样式需求，这就给我很多困扰，查阅大量资料和研究，最终选定xlsx-style进行修改(借鉴https://www.jianshu.com/p/23ee264ecde8)。以下便是xlsx-style踩坑之旅：导入问题cnpm ...
JS都有哪些操作数组的方法
ggq53219的博客
09-04 552
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1467
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 158
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 504
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲
HGX-DJK
09-08 176
【代码】在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲。
基于Spring Boot开发一个二手交易平台系统
最新发布
嵌入式行业打工人，不定期更新博客。
09-08 473
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如商品搜索、购物车、支付接口等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如有疑问可以评论或者私信，看到一定解答。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 916
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1284
hiprint
javascript通过while循环和switch语句制作一个简易ATM机
2301_81968528的博客
09-04 1118
输入3，提示查看余额，弹出对话框，提示账户余额。输入2，提示取钱，弹出对话框，输入取钱金额。输入1，提示存钱，弹出对话框输入存钱金额。上述代码就是一个简易ATM的代码。
面试总结1
weixin_50342995的博客
09-04 366
最好写出数据库3范式都是什么。
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` 模块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值