xlsx，xlsx-style file-saver ,vue3+vite4+Excel导出解决方案

已于 2023-02-04 13:03:56 修改
阅读量2.1k 收藏 6
点赞数 3
分类专栏： vue.js 文章标签： excel javascript 前端
于 2023-02-03 18:28:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g18204746769/article/details/128874073
版权

文章目录

前情提要

在这里插入图片描述

应用场景

最近在迁移一个vue2项目到vue3，过程真的很曲折，我希望可以帮其他的vue3开发者节省一些时间

实战解析

前端excel导出，并且希望有样式的话需要依赖三个插件

  1. XLSX //表单元组件
  2. xlsx-style //样式表建立
  3. file-save //文件保存

下面分享一下我的package-json 文件

"file-saver": "github:cityTS/FileSaver.js"
"xlsx": "0.16.2",
"xlsx-style-vite": "^0.0.2"

这是我的三个依赖，用以上的三个库就可以完美输出样式excel，这里解释一下xlsx-style-vite这是一个兼容vue3 的xlsx-style版本，开箱即用，香香。

由于时间原因我就直接放代码了，大家仅供参考：

/* eslint-disable */
import { saveAs } from 'file-saver'
import Blob from './Blob'
import XLSX from 'xlsx/dist/xlsx.core.min'
import xlsx_style from 'xlsx-style-vite'

function formatJson(jsonData) {
    console.log(jsonData)
}
export function export_json_to_excel(th, jsonData, defaultTitle, merges, autoWidth = true) {

    /* original data */

    var data = jsonData;
    data.unshift(th);
    var ws_name = "SheetJS";

    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
    // if (merges.length > 0) {
    //     if (!ws['!merges']) ws['!merges'] = [];
    //     merges.forEach(item => {
    //         ws['!merges'].push(XLSX.utils.decode_range(item))
    //     })
    // }
    // if (autoWidth) {
    //     /*设置worksheet每列的最大宽度*/
    //     const colWidth = data.map(row => row.map(val => {
    //       /*先判断是否为null/undefined*/
    //       if (val == null) {
    //         return {
    //           'wch': 10
    //         };
    //       }
    //       /*再判断是否为中文*/
    //       else if (val.toString().charCodeAt(0) > 255) {
    //         return {
    //           'wch': val.toString().length * 2
    //         };
    //       } else {
    //         return {
    //           'wch': val.toString().length
    //         };
    //       }
    //     }))
    //     /*以第一行为初始值*/
    //     let result = colWidth[0];
    //     for (let i = 1; i < colWidth.length; i++) {
    //       for (let j = 0; j < colWidth[i].length; j++) {
    //         if (result[j]['wch'] < colWidth[i][j]['wch']) {
    //           result[j]['wch'] = colWidth[i][j]['wch'];
    //         }
    //       }
    //     }
    //     ws['!cols'] = result;
    //   }
    const options = {
        '!cols': [
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
            { wpx: 60 },
        ],
        // '!rows': [
        //     { hpx: 40, },
        //     { hpx: 60 },
        //     { hpx: 80 },
        //     { hpx: 60 },
        // ],
        '!margins': { left: 0.7, right: 0.7, top: 0.75, bottom: 0.75, header: 0.3, footer: 0.3 },
    }
    if (merges) {
        ws['!merges'] = merges
    }
    ws = Object.assign(ws,options); //宽高
    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    console.log(wb.Sheets, xlsx_style);

    var wbout = xlsx_style.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
    var title = defaultTitle || '列表';
    saveAs(s2ab(wbout), title + ".xlsx")
}

blob.js

/* eslint-disable */
/* Blob.js
 * A Blob implementation.
 * 2014-05-27
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

const blob = function (view) {
    "use strict";

    view.URL = view.URL || view.webkitURL;

    if (view.Blob && view.URL) {
        try {
            new Blob;
            return;
        } catch (e) {}
    }

    // Internally we use a BlobBuilder implementation to base Blob off of
    // in order to support older browsers that only have BlobBuilder
    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
            var
                get_class = function(object) {
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                }
                , FakeBlobBuilder = function BlobBuilder() {
                    this.data = [];
                }
                , FakeBlob = function Blob(data, type, encoding) {
                    this.data = data;
                    this.size = data.length;
                    this.type = type;
                    this.encoding = encoding;
                }
                , FBB_proto = FakeBlobBuilder.prototype
                , FB_proto = FakeBlob.prototype
                , FileReaderSync = view.FileReaderSync
                , FileException = function(type) {
                    this.code = this[this.name = type];
                }
                , file_ex_codes = (
                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
                ).split(" ")
                , file_ex_code = file_ex_codes.length
                , real_URL = view.URL || view.webkitURL || view
                , real_create_object_URL = real_URL.createObjectURL
                , real_revoke_object_URL = real_URL.revokeObjectURL
                , URL = real_URL
                , btoa = view.btoa
                , atob = view.atob

                , ArrayBuffer = view.ArrayBuffer
                , Uint8Array = view.Uint8Array
                ;
            FakeBlob.fake = FB_proto.fake = true;
            while (file_ex_code--) {
                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
            }
            if (!real_URL.createObjectURL) {
                URL = view.URL = {};
            }
            URL.createObjectURL = function(blob) {
                var
                    type = blob.type
                    , data_URI_header
                    ;
                if (type === null) {
                    type = "application/octet-stream";
                }
                if (blob instanceof FakeBlob) {
                    data_URI_header = "data:" + type;
                    if (blob.encoding === "base64") {
                        return data_URI_header + ";base64," + blob.data;
                    } else if (blob.encoding === "URI") {
                        return data_URI_header + "," + decodeURIComponent(blob.data);
                    } if (btoa) {
                        return data_URI_header + ";base64," + btoa(blob.data);
                    } else {
                        return data_URI_header + "," + encodeURIComponent(blob.data);
                    }
                } else if (real_create_object_URL) {
                    return real_create_object_URL.call(real_URL, blob);
                }
            };
            URL.revokeObjectURL = function(object_URL) {
                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
                    real_revoke_object_URL.call(real_URL, object_URL);
                }
            };
            FBB_proto.append = function(data/*, endings*/) {
                var bb = this.data;
                // decode data to a binary string
                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
                    var
                        str = ""
                        , buf = new Uint8Array(data)
                        , i = 0
                        , buf_len = buf.length
                        ;
                    for (; i < buf_len; i++) {
                        str += String.fromCharCode(buf[i]);
                    }
                    bb.push(str);
                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
                    if (FileReaderSync) {
                        var fr = new FileReaderSync;
                        bb.push(fr.readAsBinaryString(data));
                    } else {
                        // async FileReader won't work as BlobBuilder is sync
                        throw new FileException("NOT_READABLE_ERR");
                    }
                } else if (data instanceof FakeBlob) {
                    if (data.encoding === "base64" && atob) {
                        bb.push(atob(data.data));
                    } else if (data.encoding === "URI") {
                        bb.push(decodeURIComponent(data.data));
                    } else if (data.encoding === "raw") {
                        bb.push(data.data);
                    }
                } else {
                    if (typeof data !== "string") {
                        data += ""; // convert unsupported types to strings
                    }
                    // decode UTF-16 to binary string
                    bb.push(unescape(encodeURIComponent(data)));
                }
            };
            FBB_proto.getBlob = function(type) {
                if (!arguments.length) {
                    type = null;
                }
                return new FakeBlob(this.data.join(""), type, "raw");
            };
            FBB_proto.toString = function() {
                return "[object BlobBuilder]";
            };
            FB_proto.slice = function(start, end, type) {
                var args = arguments.length;
                if (args < 3) {
                    type = null;
                }
                return new FakeBlob(
                    this.data.slice(start, args > 1 ? end : this.data.length)
                    , type
                    , this.encoding
                );
            };
            FB_proto.toString = function() {
                return "[object Blob]";
            };
            FB_proto.close = function() {
                this.size = this.data.length = 0;
            };
            return FakeBlobBuilder;
        }(view));

    view.Blob = function Blob(blobParts, options) {
        var type = options ? (options.type || "") : "";
        var builder = new BlobBuilder();
        if (blobParts) {
            for (var i = 0, len = blobParts.length; i < len; i++) {
                builder.append(blobParts[i]);
            }
        }
        return builder.getBlob(type);
    };
}
export default blob

---

# 最后

📚 [vue](https://blog.csdn.net/g18204746769/category_12025201.html?spm=1001.2014.3001.5482)
☃️ 个人简介：一个喜爱技术的人。
🌞 励志格言: 脚踏实地，虚心学习。
❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回、回访，欢迎进一步交流。
Min;
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
vue3+xlsx+xlsx-style导出excel文件
weixin_51410591的博客
04-12 743
【代码】vue3+xlsx+xlsx-style导出excel文件。
vite+vue+element-plus完成一个admin管理后台
Linlietao0587的博客
04-22 1688
整体项目的 访问链接：https://bigmiss.top/demo/index.html。
vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法
lee_amazing的博客
12-06 5461
基于vue3+vite的项目实现导出带有样式的excel表格，框架用的是vben，我的版本为 “xlsx”: “^0.16.9”, “xlsx-style”: “^0.8.13” “file-saver”: “^2.0.5”,
vite + xlsx + xlsx-style 导出 Excel
最新发布
pig_ning的博客
07-27 220
vite + xlsx + xlsx-style 导出 Excel
【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析，已实现
花椒和蕊的博客
08-15 4437
【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析，已实现
vue3前端excel导出；组件表格，自定义表格导出；Vue3 + xlsx + xlsx-style
MELANCHOLY ❤ ◁ ❚❚ ▷
02-20 2626
比如这种前端拼成的，又附带各种样式的表格（1）：合并单元格（2）：列宽（3）：背景色（4）：字体相关-大小粗细颜色字体等（5）：表格线，边框数据处理就不写了，数据处理为数组就可以了['左上表头','','','右上',''],['标题1','','','',''],['标题','测试合并','','',''],['固定标题','123','123','',''],['左下表头','','','右下',''],
关于vue3的使用插件FileSaver并且excel导出的实现方法
weixin_48194540的博客
05-17 1470
备注:下载的是当前页的数据,因为啥因为我传给后端的有分页,只能下载当前页面。当前没有测试多表头和加边框。
导出excel file-saver XLSX
似水流年，举重若轻
03-03 485
file-saver:GitHub - eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation
详解如何在Vue项目中导出Excel
12-10
由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。 所以你先需要安装如下命令： npm install xlsx file-saver -S npm install script-loader -S -D  由于js-xlsx体积还是很大的，导出功能也...
vue导出excel表格Blob,Export2Excel
01-15
为了在Vue项目中使用`Export2Excel`，你需要确保已经正确安装了依赖库（如`xlsx-style`和`file-saver`），并在项目中引入它们。在合适的地方调用`exportExcel`函数，传入你的数据和期望的工作表名称，即可实现数据...
Vue 前端导出Excel表格，多级表头合并
迈向前端攻城狮的路上
05-26 9600
针对有Excel导出经验 安装依赖 npm install --save xlsx file-saver Export2Excel.js 文件 /* eslint-disable */ import { saveAs } from 'file-saver' import XLSX from 'xlsx' function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); va
VUE中使用XLSX实现导出excel表格
weixin_44143173的博客
02-26 1549
简介 项目中经常会用导出数据的场景，这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖（三个依赖） npm install -S file-saver xlsx npm install -D script-loader 使用 ## 1.在项目的 src 目录下新建文件夹（名字任意），创建如下两个文件 *** 文件1：Bl...
office文件所对应的的 Content-type类型Content-type类型总结
灰海
08-26 2392
文件后缀 MIME TYPE .doc application/msword .dot application/msword .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template .docm application/vnd.ms-word.documen
前端使用xlsx、file-saver实现自定义excel格式导出（列宽、字体、边框、行高）
qq_42571665的博客
10-10 5189
vue+element-ui前端使用xlsx、file-saver实现excel导出，表头合并，列宽调整，字体颜色调整
Vue2.0/Vue3.0使用xlsx+xlsx-style实现导出Excel文件
蜗牛快爬
09-01 1279
vue 导出excel
【Vue】导出Excel（xlsx和file-saver）
y_coder的博客
03-28 892
该方法会创建一个包含三列（姓名、年龄、职业）的二维数组，然后使用xlsx库将其转换为工作表，并添加到工作簿中。接着使用FileSaver库将工作簿保存为.xlsx格式的文件，并提供一个下载链接，最后清理URL。在Vue中导出Excel文件，可以使用第三方库如xlsx和file-saver。// 使用blob和FileReader创建一个Blob URL。// 假设你有一个表格数据的数组。// 使用saveAs下载文件。// 创建工作簿并添加工作表。// 将数据转换为工作表。// 生成Excel文件。
第四篇：VUE 利用 xlsx 和 file-saver 实现 Excel 表格的导入与导出
Yzt_199626的博客
04-28 2712
第四篇：VUE 利用xlsx 和file-saver 实现 Excel 表格的导入与导出 要点：本章在 xlsx 和 file-saver 基础上，简单的封装了方法，实现了 表格 Excel 的导出 与 导入。文件类型可支持 xlsx、csv 和 txt 。 页面的大致效果如下： 1. npm 安装 xlsx和 file-saver npm install xlsx --save npm install file-saver --save 2. 封装的方法文件(可直接使用） ...
Xlsx结合File-Saver实现前端页面表格导出Excel为文件
热门推荐
凭时间赢来的东西，时间肯定会为之作证
03-25 8万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
vue导出表格
hsCBY的博客
10-14 458
下载 cnpm install file-saver cnpm install xlsx -S cnpm install script-loader -D //导出表格的方法 ExportXlsx(state, list) { console.log(list) //这里导入的是 Export2Excel.js文件路径 import('@/vendor/Export2Ex...
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` 模块。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Min;

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值