前端使用Export2Excel将页面Table中的数据导出为Excel

前端使用Export2Excel将页面Table中的数据导出为Excel

在项目中,用于需要将表格中的数据导出为Excel,根据用于自己的表头样式。经过千方百计的百度。终于找到了这个Export2Excel,插件。
1、安装
需要以下几个插件,我们直接用npm安装。

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

2、Export2Excel需要本地引入两个JS文件
Blob.js文件的源码。

/* Blob.js
 * A Blob implementation.
 * 2014-07-24
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/dsamarin
 * License: MIT
 *   See https://github.com/eligrey/Blob.js/blob/master/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 */

(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

			, origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
		;
		FakeBlob.fake = FB_proto.fake = true;
		while (file_ex_code--) {
			FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
		}
		// Polyfill URL
		if (!real_URL.createObjectURL) {
			URL = view.URL = function(uri) {
				var
					  uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
					, uri_origin
				;
				uri_info.href = uri;
				if (!("origin" in uri_info)) {
					if (uri_info.protocol.toLowerCase() === "data:") {
						uri_info.origin = null;
					} else {
						uri_origin = uri.match(origin);
						uri_info.origin = uri_origin && uri_origin[1];
					}
				}
				return uri_info;
			};
		}
		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 = 0;
			delete this.data;
		};
		return FakeBlobBuilder;
	}(view));

	view.Blob = function(blobParts, options) {
		var type = options ? (options.type || "") : "";
		var builder = new BlobBuilder();
		if (blobParts) {
			for (var i = 0, len = blobParts.length; i < len; i++) {
				if (Uint8Array && blobParts[i] instanceof Uint8Array) {
					builder.append(blobParts[i].buffer);
				}
				else {
					builder.append(blobParts[i]);
				}
			}
		}
		var blob = builder.getBlob(type);
		if (!blob.slice && blob.webkitSlice) {
			blob.slice = blob.webkitSlice;
		}
		return blob;
	};

	var getPrototypeOf = Object.getPrototypeOf || function(object) {
		return object.__proto__;
	};
	view.Blob.prototype = getPrototypeOf(new view.Blob());
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

Export2Excel.js 文件源码

/* eslint-disable */
import { saveAs } from 'file-saver'
// import XLSX from 'xlsx'
import XLSX from 'xlsx-style'

function generateArray(table) {
    var out = [];
    var rows = table.querySelectorAll('tr');
    var ranges = [];
    for (var R = 0; R < rows.length; ++R) {
        var outRow = [];
        var row = rows[R];
        var columns = row.querySelectorAll('td');
        for (var C = 0; C < columns.length; ++C) {
            var cell = columns[C];
            var colspan = cell.getAttribute('colspan');
            var rowspan = cell.getAttribute('rowspan');
            var cellValue = cell.innerText;
            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

            //Skip ranges
            ranges.forEach(function (range) {
                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
                }
            });

            //Handle Row Span
            if (rowspan || colspan) {
                rowspan = rowspan || 1;
                colspan = colspan || 1;
                ranges.push({
                    s: {
                        r: R,
                        c: outRow.length
                    },
                    e: {
                        r: R + rowspan - 1,
                        c: outRow.length + colspan - 1
                    }
                });
            };

            //Handle Value
            outRow.push(cellValue !== "" ? cellValue : null);

            //Handle Colspan
            if (colspan)
                for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
        }
        out.push(outRow);
    }
    return [out, ranges];
};

function datenum(v, date1904) {
    if (date1904) v += 1462;
    var epoch = Date.parse(v);
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
    var ws = {};
    var range = {
        s: {
            c: 10000000,
            r: 10000000
        },
        e: {
            c: 0,
            r: 0
        }
    };
    for (var R = 0; R != data.length; ++R) {
        for (var C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R;
            if (range.s.c > C) range.s.c = C;
            if (range.e.r < R) range.e.r = R;
            if (range.e.c < C) range.e.c = C;
            var cell = {
                v: data[R][C]
            };
            if (cell.v == null) continue;

            //如果单元格所在的值为空,让其值为“——”,否则下面设置的边框对其不生效
            /*if (cell.v == null) {
                cell.v = "——";
            };*/
            var cell_ref = XLSX.utils.encode_cell({
                c: C,
                r: R
            });

            if (typeof cell.v === 'number') cell.t = 'n';
            else if (typeof cell.v === 'boolean') cell.t = 'b';
            else if (cell.v instanceof Date) {
                cell.t = 'n';
                cell.z = XLSX.SSF._table[14];
                cell.v = datenum(cell.v);
            } else cell.t = 's';


            ws[cell_ref] = cell;
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
    return ws;
}

function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook();
    this.SheetNames = [];
    this.Sheets = {};
}

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

export function export_table_to_excel(id) {
    var theTable = document.getElementById(id);
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";

    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */
    // ws['!cols'] = ['apple', 'banan'];
    ws['!merges'] = ranges;

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });

    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), "test.xlsx")
}

export function export_json_to_excel({
                                         multiHeader = [],
                                         header,
                                         data,
                                         filename,
                                         merges = [],
                                         autoWidth = true,
                                         bookType = 'xlsx'
                                     } = {}) {
    /* original data */
    filename = filename || 'excel-list'
    data = [...data]
    data.unshift(header);

    for (let i = multiHeader.length - 1; i > -1; i--) {
        data.unshift(multiHeader[i])
    }

    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;
    }

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: 'binary'
    });
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), `${filename}.${bookType}`);
}


/**
 * 没有聚合表头-只有两层
 * @param multiHeader
 * @param multiHeader2
 * @param data
 * @param filename
 * @param sheetName
 * @param merges
 * @param bookType
 * @param autoWidth
 */
export function export_json_to_excel_one({
                                        // title,   // 新增的参数,表格标题
                                         multiHeader = [],	// 第一行表头
                                         multiHeader2 = [], // 第二行表头
                                         // header,	// 第三行表头
                                         data,
                                         filename, //文件名
                                         sheetName,
                                         merges = [], // 合并
                                         bookType = 'xlsx',
                                         autoWidth = true,
                                     } = {}) {

    /* original data */
    filename = filename || '列表';
    data = [...data];
    // data.unshift(header);
    // data.unshift(title); // 表格标题
    var ws_name = sheetName;
    data.unshift(multiHeader2)
    data.unshift(multiHeader)

    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 || val == undefined) {
                    return {
                        wch: 10
                    };
                } else if (val.toString().charCodeAt(0) > 255) {
                    /*再判断是否为中文*/
                    return {
                        wch: val.toString().length * 2
                    };
                } else {
                    return {
                        wch: val.toString().length * 1.5
                    };
                }
            })
        );
        /*以主表第二行为初始值,因为我的第一行是表格标题,会比较长,所以以主表第二行为初始值*/
        let result = colWidth[1];
        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;
    }
    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var dataInfo = wb.Sheets[wb.SheetNames[0]];
    // 设置单元格框线
    const borderAll = {
        top: {
            style: "thin"
        },
        bottom: {
            style: "thin"
        },
        left: {
            style: "thin"
        },
        right: {
            style: "thin"
        }
    };

    // 给所有单元格加上边框,内容居中,字体,字号,标题表头特殊格式部分后面替换
    for (var i in dataInfo) {
        if (
            i == "!ref" ||
            i == "!merges" ||
            i == "!cols" ||
            // i == "!rows" ||
            i == "A1"
        ) { } else {
            dataInfo[i + ""].s = {
                border: borderAll,
                alignment: {
                    horizontal: "center",
                    vertical: "center"
                },
                font: {
                    name: "微软雅黑",
                    sz: 10
                }
            };
        }
    }

    // 设置表格样式
    const arrabc = ["A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
    ]

    // 给标题、表格描述信息、表头等部分加上特殊格式
    arrabc.some(function (v) {
        for (let j = 1; j < multiHeader.length + 3; j++) {
            const _v = v + j
            if (dataInfo[_v]) {
                dataInfo[_v].s = {};
                // 标题部分A1-Z1
                if (j == 1) {
                    dataInfo[v + j].s = {
                        font: {
                            name: "微软雅黑",
                            sz: 12,
                            color: {
                                rgb: "000000"
                            },
                            bold: true,
                            italic: false,
                            underline: false
                        },
                        alignment: {
                            horizontal: "center",
                            vertical: "center"
                        }
                    };
                } else {
                    // 表头部分,根据表头特殊格式设置
                    if (multiHeader.length == 0) {
                        // multiHeader.length = 0 时表头没有合并单元格,表头只占1行A2-Z2
                        const fv = v + (multiHeader.length + 2)
                        dataInfo[fv].s = {
                            border: borderAll,
                            font: {
                                name: "微软雅黑",
                                sz: 11,
                                bold: true
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            },
                            fill: {
                                fgColor: {
                                    rgb: "f0f0f0"
                                },
                            },
                        }
                    } else if (multiHeader.length == 1) {
                        // multiHeader.length = 0 时表头有合并单元格,表头只占2行A2-Z2,A3-Z3,这是没有描述信息只有表头合并的
                        dataInfo[v + j].s = {
                            border: borderAll,
                            font: {
                                name: "微软雅黑",
                                sz: 11,
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            },
                            fill: {
                                fgColor: {
                                    rgb: "f0f0f0"
                                }
                            },
                        }
                    } else {
                        // multiHeader.length = 0 时表头有合并单元格,表头多行
                        dataInfo[v + j].s = {
                            border: borderAll,
                            font: {
                                name: "微软雅黑",
                                sz: 9,
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            }
                        }
                    }
                }

            }
        }
    });

    var wbout = XLSX.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: "binary"
    });
    saveAs(
        new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }),
        `${filename}.${bookType}`
    );
}


/**
 * 多表头-三层表头,
 * @param title
 * @param multiHeader
 * @param multiHeader2
 * @param data
 * @param filename
 * @param sheetName
 * @param merges
 * @param autoWidth
 * @param bookType
 */
export function export_json_to_excel_two({
                                         title,   // 新增的参数,表格标题
                                         multiHeader = [],	// 第一行表头
                                         multiHeader2 = [], // 第二行表头
                                         // header,	// 第三行表头
                                         data,
                                         filename, //文件名
                                         sheetName,
                                         merges = [], // 合并
                                         autoWidth = true,
                                         bookType = 'xlsx'
                                     } = {}) {

    /* original data */
    filename = filename || '列表';
    // data.unshift(header);

    data = [...data];


    var ws_name = sheetName;
    data.unshift(multiHeader2)
    data.unshift(multiHeader)
    data.unshift(title); // 表格标题
    /*for (let i = multiHeader2.length - 1; i > -1; i--) {
        data.unshift(multiHeader2[i]);
    }*/
    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 || val == undefined) {
                    return {
                        wch: 10
                    };
                } else if (val.toString().charCodeAt(0) > 255) {
                    /*再判断是否为中文*/
                    return {
                        wch: val.toString().length * 2
                    };
                } else {
                    return {
                        wch: val.toString().length * 1.5
                    };
                }
            })
        );
        /*以主表第二行为初始值,因为我的第一行是表格标题,会比较长,所以以主表第二行为初始值*/
        let result = colWidth[1];
        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;
    }
    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var dataInfo = wb.Sheets[wb.SheetNames[0]];
    // 设置单元格框线
    const borderAll = {
        top: {
            style: "thin"
        },
        bottom: {
            style: "thin"
        },
        left: {
            style: "thin"
        },
        right: {
            style: "thin"
        }
    };

    // 给所有单元格加上边框,内容居中,字体,字号,标题表头特殊格式部分后面替换
    for (var i in dataInfo) {
        if (
            i == "!ref" ||
            i == "!merges" ||
            i == "!cols" ||
            // i == "!rows" ||
            i == "A1"
        ) { } else {
            dataInfo[i + ""].s = {
                border: borderAll,
                alignment: {
                    horizontal: "center",
                    vertical: "center"
                },
                font: {
                    name: "微软雅黑",
                    sz: 10
                }
            };
        }
    }

    // 设置表格样式
    const arrabc = ["A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
    ]

    // 给标题、表格描述信息、表头等部分加上特殊格式
    arrabc.some(function (v) {
        for (let j = 1; j < multiHeader.length + 3; j++) {
            const _v = v + j
            if (dataInfo[_v]) {
                dataInfo[_v].s = {};
                // 标题部分A1-Z1
                if (j == 1) {
                    dataInfo[v + j].s = {
                        font: {
                            name: "微软雅黑",
                            sz: 12,
                            color: {
                                rgb: "000000"
                            },
                            bold: true,
                            italic: false,
                            underline: false
                        },
                        alignment: {
                            horizontal: "center",
                            vertical: "center"
                        }
                    };
                } else {
                    // 表头部分,根据表头特殊格式设置
                    if (multiHeader.length == 0) {
                        // multiHeader.length = 0 时表头没有合并单元格,表头只占1行A2-Z2
                        const fv = v + (multiHeader.length + 2)
                        dataInfo[fv].s = {
                            border: borderAll,
                            font: {
                                name: "微软雅黑",
                                sz: 11,
                                bold: true
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            },
                            fill: {
                                fgColor: {
                                    rgb: "f0f0f0"
                                },
                            },
                        }
                    } else if (multiHeader.length == 1) {
                        // multiHeader.length = 0 时表头有合并单元格,表头只占2行A2-Z2,A3-Z3,这是没有描述信息只有表头合并的
                        dataInfo[v + j].s = {
                            border: borderAll,
                            font: {
                                name: "微软雅黑",
                                sz: 11,
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            },
                            fill: {
                                fgColor: {
                                    rgb: "f0f0f0"
                                }
                            },
                        }
                    } else {
                        // multiHeader.length = 0 时表头有合并单元格,表头多行
                        dataInfo[v + j].s = {
                            border: borderAll,
                            font: {
                                name: "微软雅黑",
                                sz: 9,
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            }
                        }
                    }
                }
                // multiHeader.length + 2 是表头的最后1行
                /*dataInfo[v + (multiHeader.length + 2)].s = {
                    border: borderAll,
                    font: {
                        name: "微软雅黑",
                        sz: 10,
                    },
                    alignment: {
                        horizontal: "center",
                        vertical: "center"
                    },
                    fill: {
                        fgColor: {
                            rgb: "f0f0f0"
                        }
                    },
                }*/
            }
        }
    });

    // var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    // saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${filename}.${bookType}`)
    var wbout = XLSX.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: "binary"
    });
    saveAs(
        new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }),
        `${filename}.${bookType}`
    );
}

以上的两个文件都需要引入到我们本地文件夹中。
3、需要注意的地方
在这里插入图片描述在Export2Excel.js中如果我们用xlsx,那么我们在导出表头样式的时候,Excel中没办法导出Excel的样式(如:字体、加粗、边框等),百度上有好多文章都是用xlsx,最后发现不行。所以我改成了“xlsx-style”;改完之后。xlsx插件在package.json中还不能删除。好像是xlsx-style中有引用还是怎么滴。
4、我们在应用import XLSX from 'xlsx-style’之后,还会报一个错误;

This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js,

对于这个问题。网上也给了好多解答。
1、直接修改源码。
在这里插入图片描述
以上就是修改源码的。但是这样还是有一个问题
我在打包发布的时候。发现yarn install之后。这个问题有出来了。而且还没办法打包成功。所以我直接排除了这个解决办法。
2、修改vue.config.js文件中的externals
首先加入以下红框中的配置
在这里插入图片描述
之后在configureWebpack中加入以下的配置
在这里插入图片描述
还是红框中的内容。

注意:这个地方还有一个其他的版本。
在这里插入图片描述只是这个版本。我还是在yarn install的时候,还是会报错。没办法成功打包

5、Vue页面内使用
直接给一个页面按钮给一个点击事件
<a-button icon=“import” type=“primary” @click=“exportCjl”>导出

exportCjl(){
        import("../../../utils/Export2Excel").then((excel)=>{

            const multiHeader =['采集量统计','','','','','','']
            const multiHeader2 =['单位名称','标准地址','实有人口','实有房屋','实有单位','从业人员','采集总量']

            const filterVal = [
                "gajgmc",
                "bzdz",
                "syrk",
                "syfw",
                "sydw",
                "cyry",
                "cjzl"
            ]; // 导出的表头字段名
            const merges = [
                "A1:G1"
            ]; // 根据Excel确定要合并的单元格
            const data = this.formatJson(filterVal, this.dataSource);
            let filterName = "综合统计-采集总量统计";
            let sheetName = "采集量统计";

            excel.export_json_to_excel_one({
                multiHeader, //这里是第一行的表头
                multiHeader2, // 这里是第二行的表头
                // header: tHeader, //这里应该是算第三行的表头
                data,
                merges,
                autoWidth:true,
                filename: filterName,
                sheetName:sheetName
            })
        })
    },

6、接下来看看效果
one:使用export_json_to_excel_one方法的时候的效果

在这里插入图片描述
two:使用export_json_to_excel_two方法后的效果
在这里插入图片描述
至此。基本上就解决了。至于没解决的。只能留着当BUG了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

拈㕦一笑

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

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

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

打赏作者

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

抵扣说明:

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

余额充值