VUE导出多级表头Excel

最新推荐文章于 2024-01-19 15:30:57 发布

LGEC

最新推荐文章于 2024-01-19 15:30:57 发布

阅读量1.2k

点赞数 1

分类专栏：随笔文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LGEC_/article/details/126406138

版权

本文介绍了如何在Vue项目中实现多级表头Excel的导出。首先，安装了vue.js、javascript和前端相关依赖。接着，创建了一个公共导出方法，包括引入Blob.js和Export2Excel.js文件，并在main.js中配置。最后，展示了具体的导出代码及成功导出的截图。

摘要由CSDN通过智能技术生成

一、安装相关依赖

主要应用的插件是xlsx、file-saver、script-loader，还有表格样式优化插件xlsx-style

npm install xlsx --save
npm install file-saver --save
npm install script-loader --save
npm install xlsx-style --save

二、创建公共导出方法

在src目录下创建excel文件夹，excel文件夹中放入Blob.js和Export2Excel.js

1、Blob.js

/* eslint-disable */
(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