表格导出使用xlsx-style-vite修改导出样式

最新推荐文章于 2025-03-12 14:46:57 发布

susu爱摆烂

最新推荐文章于 2025-03-12 14:46:57 发布

阅读量1.3k

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/Gardent_/article/details/136652237

版权

本文描述了在使用Vue3、Vite和TypeScript构建的项目中，解决表格导出样式问题的方法，通过引入并正确配置xlsx-style-vite模块，实现了公共表格样式设置和合并行列的功能，解决了起初安装xlsx-style时遇到的依赖问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需求让封装一个公共表格导出组件，项目是vue3+vite+ts搭建的，最初下载xlsx-style总是报错 this relative module was not found: ./cptable and ./node_modules/xlsx-style，查到有让改依赖解决报错问题的感觉不实用后续再次下载依赖还会出问题，困扰了一天没有解决问题，后续突然发现了xlsx-style-vite完美解决导出样式问题。

1.下载依赖：npm install xlsx-style-vite

2.在需要的页面引用 import * as XLSX_STYLE from 'xlsx-style-vite

下面是样式设置的代码：

//设置公共样式
const setPubExcel = (data) => {
    data["!cols"] = [];
    const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows'];
    for (let key in data) {
        if (data.hasOwnProperty(key)) {
            if (!excludes.includes(key)) {
                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'