前端使用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了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Vue的el-table组件是一个强大的表格组件,它可以方便地展示大量数据,并且支持分页功能。同时,借助前端库file-saver,我们可以实现将el-table数据导出Excel文件。 要实现这个功能,首先需要在Vue项目安装file-saver库。可以使用npm或者yarn命令进行安装。 安装完毕后,我们可以在需要导出Excel页面引入file-saver库。 import { saveAs } from 'file-saver'; 在el-table数据,我们通常会使用一个数组来存储表格的数据。假设我们的表格数据tableData,我们可以通过将这个数组转换为Excel文件来实现导出功能。 首先将表格数据转换为二维数组的形式,使得每一行的数据存储在一个小数组。 const exportData = tableData.map(row => { return Object.values(row); }); 然后,我们可以使用file-saver库提供的saveAs函数来将数据导出Excel文件。我们需要将二维数组导出为一个csv格式的文本文件,并使用saveAs函数保存文件。 const csvContent = exportData.map(row => row.join(",")).join("\n"); const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" }); saveAs(blob, "export.csv"); 在上述代码,我们首先将二维数组通过map和join方法转换为一个csv格式的字符串,然后使用Blob创建一个Blob对象,最后使用saveAs函数将Blob对象保存为一个名为export.csv的文件。 通过上述步骤,我们就可以实现在Vue使用file-saver库将el-table的分页数据导出Excel文件。导出的文件可以方便地在Excel查看和处理。 ### 回答2: Vue的el-table组件和FileSaver,可以实现前端导出Excel导出分页数据的功能。 首先,我们需要引入el-table和FileSaver库,并确保已经正确配置了Vue项目。然后,在组件使用el-table,并将分页数据绑定到el-table的data属性上。 接下来,我们需要添加一个导出按钮,用于触发导出操作。当按钮被点击时,我们可以通过el-table的方法将分页数据转换为一个二维数组,并使用FileSaver库将该数组导出Excel文件。 具体实现步骤如下: 1. 引入el-table和FileSaver库: ``` import FileSaver from 'file-saver'; import { ElTable, ElTableColumn } from 'element-ui'; ``` 2. 在组件使用el-table,并将分页数据绑定到data属性上: ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [], // 分页数据 ... }; }, ... }; </script> ``` 3. 添加一个导出按钮,并在按钮的点击事件执行导出操作: ``` <template> <el-table :data="tableData"> ... </el-table> <el-button @click="exportExcel">导出Excel</el-button> </template> <script> export default { ... methods: { exportExcel() { const data = this.$refs.table.store.states.data; // 获取所有数据 const columns = this.$refs.table.columns.map(column => column.label); // 获取表头 const tableData = [columns, ...data]; // 构造二维数组 const worksheet = XLSX.utils.aoa_to_sheet(tableData); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([excelBuffer], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, 'data.xlsx'); }, ... } }; </script> ``` 以上代码通过el-table的$refs属性获取到el-table的实例,从而可以获取到所有数据和表头,并进行导出操作。最后使用FileSaver库将二维数组保存为Excel文件,文件名为data.xlsx。 通过以上步骤,我们可以实现vue el-table前端导出Excel导出分页数据的功能。 ### 回答3: 在使用vue el-table和file-saver前端导出Excel时,默认情况下只会导出当前展示页面数据,无法导出分页数据。但我们可以通过以下步骤来实现导出分页数据的功能。 首先,我们需要手动获取所有需要导出数据。可以通过向后端发送请求获取所有数据的接口,并在前端将返回的数据进行合并。 然后,使用file-saver库将合并后的数据导出Excel文件。可以使用Blob对象将数据转换为二进制文件,再通过saveAs方法将二进制文件保存为Excel文件。 最后,展示给用户下载链接或直接自动下载导出Excel文件。 这样,我们就可以实现使用vue el-table和file-saver前端导出分页数据的功能。 需要注意的是,如果数据量较大,一次性获取全部数据可能会影响前端性能和用户体验。因此,可以考虑在导出功能添加限制,例如设置最大导出数量或者提供导出当前页和导出全部数据的选项供用户选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

拈㕦一笑

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

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

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

打赏作者

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

抵扣说明:

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

余额充值