1、需要安装file-saver和script-loader、xlsx

　　

  1. npm install file-saver / yarn add file-saver
  2.  
  3. npm install script-loader / yarn add script-loader
  4.  
  5. npm install xlsx / yarn add xlsx

　　

2、新建js文件（Blob.js和Export2Excel.js）

Blob.js

  1. /* eslint-disable */
  2. /* Blob.js*/
  3.  
  4. /*global self, unescape */
  5.  
  6. /*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
  7.  
  8. (function (view) {
  9. 	"use strict";
  10.  
  11. 	view.URL = view.URL || view.webkitURL;
  12.  
  13. 	if (view.Blob && view.URL) {
  14. 		try {
  15. 			new Blob;
  16. 			return;
  17. 		} catch (e) {
  18. 		}
  19. 	}
  20.  
  21. 	// Internally we use a BlobBuilder implementation to base Blob off of
  22. 	// in order to support older browsers that only have BlobBuilder
  23. 	var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
  24. 		var
  25. 			get_class = function (object) {
  26. 				return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
  27. 			}
  28. 			, FakeBlobBuilder = function BlobBuilder() {
  29. 				this.data = [];
  30. 			}
  31. 			, FakeBlob = function Blob(data, type, encoding) {
  32. 				this.data = data;
  33. 				this.size = data.length;
  34. 				this.type = type;
  35. 				this.encoding = encoding;
  36. 			}
  37. 			, FBB_proto = FakeBlobBuilder.prototype
  38. 			, FB_proto = FakeBlob.prototype
  39. 			, FileReaderSync = view.FileReaderSync
  40. 			, FileException = function (type) {
  41. 				this.code = this[this.name = type];
  42. 			}
  43. 			, file_ex_codes = (
  44. 				"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
  45. 				+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
  46. 			).split(" ")
  47. 			, file_ex_code = file_ex_codes.length
  48. 			, real_URL = view.URL || view.webkitURL || view
  49. 			, real_create_object_URL = real_URL.createObjectURL
  50. 			, real_revoke_object_URL = real_URL.revokeObjectURL
  51. 			, URL = real_URL
  52. 			, btoa = view.btoa
  53. 			, atob = view.atob
  54.  
  55. 			, ArrayBuffer = view.ArrayBuffer
  56. 			, Uint8Array = view.Uint8Array
  57.  
  58. 			, origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
  59. 		;
  60. 		FakeBlob.fake = FB_proto.fake = true;
  61. 		while (file_ex_code--) {
  62. 			FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
  63. 		}
  64. 		// Polyfill URL
  65. 		if (!real_URL.createObjectURL) {
  66. 			URL = view.URL = function (uri) {
  67. 				var
  68. 					uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
  69. 					, uri_origin
  70. 				;
  71. 				uri_info.href = uri;
  72. 				if (!("origin" in uri_info)) {
  73. 					if (uri_info.protocol.toLowerCase() === "data:") {
  74. 						uri_info.origin = null;
  75. 					} else {
  76. 						uri_origin = uri.match(origin);
  77. 						uri_info.origin = uri_origin && uri_origin[1];
  78. 					}
  79. 				}
  80. 				return uri_info;
  81. 			};
  82. 		}
  83. 		URL.createObjectURL = function (blob) {
  84. 			var
  85. 				type = blob.type
  86. 				, data_URI_header
  87. 			;
  88. 			if (type === null) {
  89. 				type = "application/octet-stream";
  90. 			}
  91. 			if (blob instanceof FakeBlob) {
  92. 				data_URI_header = "data:" + type;
  93. 				if (blob.encoding === "base64") {
  94. 					return data_URI_header + ";base64," + blob.data;
  95. 				} else if (blob.encoding === "URI") {
  96. 					return data_URI_header + "," + decodeURIComponent(blob.data);
  97. 				}
  98. 				if (btoa) {
  99. 					return data_URI_header + ";base64," + btoa(blob.data);
  100. 				} else {
  101. 					return data_URI_header + "," + encodeURIComponent(blob.data);
  102. 				}
  103. 			} else if (real_create_object_URL) {
  104. 				return real_create_object_URL.call(real_URL, blob);
  105. 			}
  106. 		};
  107. 		URL.revokeObjectURL = function (object_URL) {
  108. 			if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
  109. 				real_revoke_object_URL.call(real_URL, object_URL);
  110. 			}
  111. 		};
  112. 		FBB_proto.append = function (data) {
  113. 			var bb = this.data;
  114. 			// decode data to a binary string
  115. 			if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
  116. 				var
  117. 					str = ""
  118. 					, buf = new Uint8Array(data)
  119. 					, i = 0
  120. 					, buf_len = buf.length
  121. 				;
  122. 				for (; i < buf_len; i++) {
  123. 					str += String.fromCharCode(buf[i]);
  124. 				}
  125. 				bb.push(str);
  126. 			} else if (get_class(data) === "Blob" || get_class(data) === "File") {
  127. 				if (FileReaderSync) {
  128. 					var fr = new FileReaderSync;
  129. 					bb.push(fr.readAsBinaryString(data));
  130. 				} else {
  131. 					// async FileReader won't work as BlobBuilder is sync
  132. 					throw new FileException("NOT_READABLE_ERR");
  133. 				}
  134. 			} else if (data instanceof FakeBlob) {
  135. 				if (data.encoding === "base64" && atob) {
  136. 					bb.push(atob(data.data));
  137. 				} else if (data.encoding === "URI") {
  138. 					bb.push(decodeURIComponent(data.data));
  139. 				} else if (data.encoding === "raw") {
  140. 					bb.push(data.data);
  141. 				}
  142. 			} else {
  143. 				if (typeof data !== "string") {
  144. 					data += ""; // convert unsupported types to strings
  145. 				}
  146. 				// decode UTF-16 to binary string
  147. 				bb.push(unescape(encodeURIComponent(data)));
  148. 			}
  149. 		};
  150. 		FBB_proto.getBlob = function (type) {
  151. 			if (!arguments.length) {
  152. 				type = null;
  153. 			}
  154. 			return new FakeBlob(this.data.join(""), type, "raw");
  155. 		};
  156. 		FBB_proto.toString = function () {
  157. 			return "[object BlobBuilder]";
  158. 		};
  159. 		FB_proto.slice = function (start, end, type) {
  160. 			var args = arguments.length;
  161. 			if (args < 3) {
  162. 				type = null;
  163. 			}
  164. 			return new FakeBlob(
  165. 				this.data.slice(start, args > 1 ? end : this.data.length)
  166. 				, type
  167. 				, this.encoding
  168. 			);
  169. 		};
  170. 		FB_proto.toString = function () {
  171. 			return "[object Blob]";
  172. 		};
  173. 		FB_proto.close = function () {
  174. 			this.size = 0;
  175. 			delete this.data;
  176. 		};
  177. 		return FakeBlobBuilder;
  178. 	}(view));
  179.  
  180. 	view.Blob = function (blobParts, options) {
  181. 		var type = options ? (options.type || "") : "";
  182. 		var builder = new BlobBuilder();
  183. 		if (blobParts) {
  184. 			for (var i = 0, len = blobParts.length; i < len; i++) {
  185. 				if (Uint8Array && blobParts[i] instanceof Uint8Array) {
  186. 					builder.append(blobParts[i].buffer);
  187. 				}
  188. 				else {
  189. 					builder.append(blobParts[i]);
  190. 				}
  191. 			}
  192. 		}
  193. 		var blob = builder.getBlob(type);
  194. 		if (!blob.slice && blob.webkitSlice) {
  195. 			blob.slice = blob.webkitSlice;
  196. 		}
  197. 		return blob;
  198. 	};
  199.  
  200. 	var getPrototypeOf = Object.getPrototypeOf || function (object) {
  201. 		return object.__proto__;
  202. 	};
  203. 	view.Blob.prototype = getPrototypeOf(new view.Blob());
  204. }(
  205. 	typeof self !== "undefined" && self
  206. 	|| typeof window !== "undefined" && window
  207. 	|| this
  208. ));

Export2Excel.js

  1. /*导出单个sheet*/
  2. /* eslint-disable */
  3. require('script-loader!file-saver');
  4. // require('script-loader!src/vendor/Blob');
  5. require('./Blob.js');
  6. require('script-loader!xlsx/dist/xlsx.core.min');
  7.  
  8. function generateArray(table) {
  9. 	var out = [];
  10. 	var rows = table.querySelectorAll('tr');
  11. 	var ranges = [];
  12. 	for (var R = 0; R < rows.length; ++R) {
  13. 		var outRow = [];
  14. 		var row = rows[R];
  15. 		var columns = row.querySelectorAll('td');
  16. 		for (var C = 0; C < columns.length; ++C) {
  17. 			var cell = columns[C];
  18. 			var colspan = cell.getAttribute('colspan');
  19. 			var rowspan = cell.getAttribute('rowspan');
  20. 			var cellValue = cell.innerText;
  21. 			if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
  22.  
  23. 		//Skip ranges
  24. 		ranges.forEach(function (range) {
  25. 				if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
  26. 					for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
  27. 				}
  28. 		});
  29.  
  30. 		//Handle Row Span
  31. 		if (rowspan || colspan) {
  32. 			rowspan = rowspan || 1;
  33. 			colspan = colspan || 1;
  34. 			ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
  35. 		}
  36. 		//Handle Value
  37. 		outRow.push(cellValue !== "" ? cellValue : null);
  38.  
  39. 		//Handle Colspan
  40. 		if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
  41. 		}
  42. 		out.push(outRow);
  43. 	}
  44. 	return [out, ranges];
  45. }
  46.  
  47. function datenum(v, date1904) {
  48. 	if (date1904) v += 1462;
  49. 	var epoch = Date.parse(v);
  50. 	return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
  51. }
  52. function sheet_from_array_of_arrays(data, opts) {
  53. 	var ws = {};
  54. 	var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
  55. 	for (var R = 0; R != data.length; ++R) {
  56. 		for (var C = 0; C != data[R].length; ++C) {
  57. 			if (range.s.r > R) range.s.r = R;
  58. 			if (range.s.c > C) range.s.c = C;
  59. 			if (range.e.r < R) range.e.r = R;
  60. 			if (range.e.c < C) range.e.c = C;
  61. 			var cell = {v: data[R][C]};
  62. 			if (cell.v == null) continue;
  63. 			var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
  64.  
  65. 			if (typeof cell.v === 'number') cell.t = 'n';
  66. 			else if (typeof cell.v === 'boolean') cell.t = 'b';
  67. 			else if (cell.v instanceof Date) {
  68. 				cell.t = 'n';
  69. 				cell.z = XLSX.SSF._table[14];
  70. 				cell.v = datenum(cell.v);
  71. 			}
  72. 			else cell.t = 's';
  73.  
  74. 			ws[cell_ref] = cell;
  75. 		}
  76. 	}
  77. 	if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
  78. 	return ws;
  79. }
  80.  
  81. function Workbook() {
  82. 	if (!(this instanceof Workbook)) return new Workbook();
  83. 	this.SheetNames = [];
  84. 	this.Sheets = {};
  85. }
  86.  
  87. function s2ab(s) {
  88. 	var buf = new ArrayBuffer(s.length);
  89. 	var view = new Uint8Array(buf);
  90. 	for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  91. 	return buf;
  92. }
  93.  
  94. export function export_table_to_excel(id) {
  95. 	var theTable = document.getElementById(id);
  96. 	var oo = generateArray(theTable);
  97. 	var ranges = oo[1];
  98.  
  99. 	/* original data */
  100. 	var data = oo[0];
  101. 	var ws_name = "SheetJS";
  102.  
  103. 	var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
  104.  
  105. 	/* add ranges to worksheet */
  106. 	// ws['!cols'] = ['apple', 'banan'];
  107. 	ws['!merges'] = ranges;
  108.  
  109. 	/* add worksheet to workbook */
  110. 	wb.SheetNames.push(ws_name);
  111. 	wb.Sheets[ws_name] = ws;
  112.  
  113. 	var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  114.  
  115. 	saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
  116. }
  117.  
  118. function formatJson(jsonData) {
  119. 	console.log(jsonData)
  120. }
  121.  
  122. export function export_json_to_excel(th, jsonData, defaultTitle) {
  123.  
  124. 	/* original data */
  125.  
  126. 	var data = jsonData;
  127. 	data.unshift(th);
  128. 	var ws_name = "SheetJS";
  129.  
  130. 	var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
  131.  
  132. 	/* add worksheet to workbook */
  133. 	wb.SheetNames.push(ws_name);
  134. 	wb.Sheets[ws_name] = ws;
  135.  
  136. 	var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  137. 	var title = defaultTitle || '列表'
  138. 	saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
  139. }

3、在需要的地方中应用

  1. methods: {
  2.     exportFile () {
  3.        const _vm = this;
  4.        let excelList = [
  5.          {id: 1, name: 'xiaoming', age: 10},
  6.          {id: 2, name: 'xiaohong', age: 15},
  7.        ]
  8.        //excel数据导出
  9.               require.ensure([], () => {
  10.                 const {
  11.                   export_json_to_excel
  12.                 } = require('./js/Export2Excel');
  13.                // 表头
  14.                 const tHeader = ['id', '名字', '年龄'];
  15.                // 字段对应
  16.                 const filterVal = ['id', 'name', 'age'];
  17.                 const data = _vm.formatJson(filterVal, excelList );
  18.                 export_json_to_excel(tHeader, data, '人员列表');
  19.               })
  20.       }，
  21.      // 导出表格的json
  22.      formatJson(filterVal, jsonData) {
  23.         return jsonData.map(v => filterVal.map(j => v[j]))
  24.      }
  25. }

4、导出多个sheet表

新建一个Export3Excel.js

  1. /*导出多个sheet*/
  2. /* eslint-disable */
  3. require("script-loader!file-saver")
  4. require('./Blob.js');
  5. require('script-loader!xlsx/dist/xlsx.core.min');
  6.  
  7. function generateArray(table) {
  8. 	var out = []
  9. 	var rows = table.querySelectorAll("tr")
  10. 	var ranges = []
  11. 	for (var R = 0; R < rows.length; ++R) {
  12. 		var outRow = []
  13. 		var row = rows[R]
  14. 		var columns = row.querySelectorAll("td")
  15. 		for (var C = 0; C < columns.length; ++C) {
  16. 			var cell = columns[C]
  17. 			var colspan = cell.getAttribute("colspan")
  18. 			var rowspan = cell.getAttribute("rowspan")
  19. 			var cellValue = cell.innerText
  20. 			if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue
  21.  
  22. 			//Skip ranges
  23. 			ranges.forEach(function(range) {
  24. 				if (
  25. 					R >= range.s.r &&
  26. 					R <= range.e.r &&
  27. 					outRow.length >= range.s.c &&
  28. 					outRow.length <= range.e.c
  29. 				) {
  30. 					for ( let i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)
  31. 				}
  32. 			})
  33.  
  34. 			//Handle Row Span
  35. 			if (rowspan || colspan) {
  36. 				rowspan = rowspan || 1
  37. 				colspan = colspan || 1
  38. 				ranges.push({
  39. 					s: {
  40. 						r: R,
  41. 						c: outRow.length
  42. 					},
  43. 					e: {
  44. 						r: R + rowspan - 1,
  45. 						c: outRow.length + colspan - 1
  46. 					}
  47. 				})
  48. 			}
  49.  
  50. 			//Handle Value
  51. 			outRow.push(cellValue !== "" ? cellValue : null)
  52.  
  53. 			//Handle Colspan
  54. 			if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null)
  55. 		}
  56. 		out.push(outRow)
  57. 	}
  58. 	return [out, ranges]
  59. }
  60.  
  61. function datenum(v, date1904) {
  62. 	if (date1904) v += 1462
  63. 	var epoch = Date.parse(v)
  64. 	return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
  65. }
  66.  
  67. function sheet_from_array_of_arrays(data, opts) {
  68. 	var ws = {}
  69. 	var range = {
  70. 		s: {
  71. 			c: 10000000,
  72. 			r: 10000000
  73. 		},
  74. 		e: {
  75. 			c: 0,
  76. 			r: 0
  77. 		}
  78. 	}
  79. 	for (var R = 0; R != data.length; ++R) {
  80. 		for (var C = 0; C != data[R].length; ++C) {
  81. 			if (range.s.r > R) range.s.r = R
  82. 			if (range.s.c > C) range.s.c = C
  83. 			if (range.e.r < R) range.e.r = R
  84. 			if (range.e.c < C) range.e.c = C
  85. 			var cell = {
  86. 				v: data[R][C]
  87. 			}
  88. 			if (cell.v == null) continue
  89. 			var cell_ref = XLSX.utils.encode_cell({
  90. 				c: C,
  91. 				r: R
  92. 			})
  93.  
  94. 			if (typeof cell.v === "number") cell.t = "n"
  95. 			else if (typeof cell.v === "boolean") cell.t = "b"
  96. 			else if (cell.v instanceof Date) {
  97. 				cell.t = "n"
  98. 				cell.z = XLSX.SSF._table[14]
  99. 				cell.v = datenum(cell.v)
  100. 			} else cell.t = "s"
  101.  
  102. 			ws[cell_ref] = cell
  103. 		}
  104. 	}
  105. 	if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range)
  106. 	return ws
  107. }
  108.  
  109. function Workbook() {
  110. 	if (!(this instanceof Workbook)) return new Workbook()
  111. 	this.SheetNames = []
  112. 	this.Sheets = {}
  113. }
  114.  
  115. function s2ab(s) {
  116. 	var buf = new ArrayBuffer(s.length)
  117. 	var view = new Uint8Array(buf)
  118. 	for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  119. 	return buf
  120. }
  121.  
  122. export function export_table_to_excel(id) {
  123. 	var theTable = document.getElementById(id)
  124. 	var oo = generateArray(theTable)
  125. 	var ranges = oo[1]
  126.  
  127. 	/* original data */
  128. 	var data = oo[0]
  129. 	var ws_name = "SheetJS"
  130.  
  131. 	var wb = new Workbook(),
  132. 		ws = sheet_from_array_of_arrays(data)
  133.  
  134. 	/* add ranges to worksheet */
  135. 	// ws['!cols'] = ['apple', 'banan'];
  136. 	ws["!merges"] = ranges
  137.  
  138. 	/* add worksheet to workbook */
  139. 	wb.SheetNames.push(ws_name)
  140. 	wb.Sheets[ws_name] = ws
  141.  
  142. 	var wbout = XLSX.write(wb, {
  143. 		bookType: "xlsx",
  144. 		bookSST: false,
  145. 		type: "binary"
  146. 	})
  147.  
  148. 	saveAs(
  149. 		new Blob([s2ab(wbout)], {
  150. 			type: "application/octet-stream"
  151. 		}),
  152. 		"test.xlsx"
  153. 	)
  154. }
  155.  
  156. //主要修改此函数内的方法
  157.  
  158. export function export_json_to_excel({
  159. 	                                     multiHeader = [],
  160. 	                                     header,
  161. 	                                     data,
  162. 	                                     sheetname,
  163. 	                                     filename,
  164. 	                                     merges = [],
  165. 	                                     autoWidth = true,
  166. 	                                     bookType = "xlsx"
  167.                                      } = {}) {
  168. 	/* original data */
  169. 	filename = filename || "excel-list"
  170. 	data = [...data]
  171.  
  172. 	for (var i = 0; i < header.length; i++) {
  173. 		data[i].unshift(header[i])
  174. 	}
  175.  
  176. 	// data.unshift(header)
  177.  
  178. 	for (let i = multiHeader.length - 1; i > -1; i--) {
  179. 		data.unshift(multiHeader[i])
  180. 	}
  181.  
  182. 	var ws_name = sheetname
  183. 	var wb = new Workbook(),
  184. 		ws = []
  185. 	for (var j = 0; j < header.length; j++) {
  186. 		ws.push(sheet_from_array_of_arrays(data[j]))
  187. 	}
  188.  
  189. 	if (merges.length > 0) {
  190. 		if (!ws["!merges"]) ws["!merges"] = []
  191. 		merges.forEach(item => {
  192. 			ws["!merges"].push(XLSX.utils.decode_range(item))
  193. 		})
  194. 	}
  195. 	if (autoWidth) {
  196. 		/*设置worksheet每列的最大宽度*/
  197. 		var colWidth = []
  198. 		for (var k = 0; k < header.length; k++) {
  199. 			colWidth.push(
  200. 				data[k].map(row =>
  201. 					row.map(val => {
  202. 						/*先判断是否为null/undefined*/
  203. 						if (val == null) {
  204. 							return {
  205. 								wch: 10
  206. 							}
  207. 						} else if (val.toString().charCodeAt(0) > 255) {
  208. 							/*再判断是否为中文*/
  209. 							return {
  210. 								wch: val.toString().length * 2
  211. 							}
  212. 						} else {
  213. 							return {
  214. 								wch: val.toString().length
  215. 							}
  216. 						}
  217. 					})
  218. 				)
  219. 			)
  220. 		}
  221.  
  222. 		/*以第一行为初始值*/
  223. 		let result = []
  224. 		for (var k = 0; k < colWidth.length; k++) {
  225. 			result[k] = colWidth[k][0]
  226. 			for (let i = 1; i < colWidth[k].length; i++) {
  227. 				for (let j = 0; j < colWidth[k][i].length; j++) {
  228. 					if (result[k][j]["wch"] < colWidth[k][i][j]["wch"]) {
  229. 						result[k][j]["wch"] = colWidth[k][i][j]["wch"]
  230. 					}
  231. 				}
  232. 			}
  233. 		}
  234. 		// 分别给sheet表设置宽度
  235. 		for (var l = 0; l < result.length; l++) {
  236. 			ws[l]["!cols"] = result[l]
  237. 		}
  238. 	}
  239.  
  240. 	/* add worksheet to workbook */
  241. 	for (var k = 0; k < header.length; k++) {
  242. 		wb.SheetNames.push(ws_name[k])
  243. 		wb.Sheets[ws_name[k]] = ws[k]
  244. 	}
  245.  
  246. 	var wbout = XLSX.write(wb, {
  247. 		bookType: bookType,
  248. 		bookSST: false,
  249. 		type: "binary"
  250. 	})
  251. 	saveAs(
  252. 		new Blob([s2ab(wbout)], {
  253. 			type: "application/octet-stream"
  254. 		}),
  255. 		`${filename}.${bookType}`
  256. 	)
  257. }

调用：

  1. methods: {
  2.     exportFile () {
  3.        const _vm = this;
  4.        const sheet1 = [
  5.          {id: 1, name: 'xiaoming', age: 10},
  6.          {id: 2, name: 'xiaohong', age: 15},
  7.        ]
  8.        const sheet2 = [
  9.          {id: 3, name: 'xiaoming1', age: 30, sex: '女'},
  10.          {id: 4, name: 'xiaohong2', age: 20, sex: '男'},
  11.        ]
  12.        const sheet1Head = ['id', '名字', '年龄']
  13.        const sheet2Head = ['id', '名字', '年龄', '性别']
  14.        const sheet1Filter = ['id', 'name', 'age']
  15.        const sheet2Filter = ['id', 'name', 'age', 'sex']
  16.        let excelDatas = [
  17.                     {
  18.                         tHeader: sheet1Head, // sheet表一头部
  19.                         filterVal: sheet1Filter, // 表一的数据字段
  20.                         tableDatas: sheet1, // 表一的整体json数据
  21.                         sheetName: "sheet1"// 表一的sheet名字
  22.                     },
  23.                     {
  24.                         tHeader: sheet2Head, // sheet表二头部
  25.                         filterVal: sheet2Filter , // 表二的数据字段
  26.                         tableDatas: sheet2, // 表二的整体json数据
  27.                         sheetName: "sheet2"// 表二的sheet名字
  28.                     },
  29.                 ]
  30.         this.json2excel(excelDatas, "人员列表", true, "xlsx")
  31.       }，
  32.      // 导出excel方法引用
  33.     json2excel(tableJson, filenames, autowidth, bookTypes) {
  34.       const that = this
  35.         //引用插件
  36.       import("。/js/Export3Excel").then(excel => {
  37.         let tHeader = []
  38.         let dataArr = []
  39.         let sheetnames = []
  40.         for (let i in tableJson) {
  41.           tHeader.push(tableJson[i].tHeader)
  42.           dataArr.push(that.formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
  43.           sheetnames.push(tableJson[i].sheetName)
  44.         }
  45.         excel.export_json_to_excel({
  46.           header: tHeader,
  47.           data: dataArr,
  48.           sheetname: sheetnames,
  49.           filename: filenames,
  50.           autoWidth: autowidth,
  51.           bookType: bookTypes
  52.         })
  53.       })
  54.     }
    }

这样就可以根据自己的需求去导出一个sheet或者两个sheet的Excel了！

vue导出Excel文件的更多相关文章

  1. 使用vue导出excel文件

    今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...

  2. axios + vue导出excel文件

    (使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...

  3. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  4. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  5. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  6. 纯前端实现数据导出excel文件

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  7. ExtJS Grid导出excel文件

    ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...

  8. PHP从数据库导出EXCEL文件

    参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...

  9. jxl导出Excel文件

    一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...

随机推荐

  1. Qt widget中使用QML自定义电池

    1.效果 2.QML 在资源里新建Mybattery.qml: import QtQuick 2.0 import QtQuick 2.12 Item { id: root property colo ...

  2. centos 安装最新版git

    对个人而言,gitlab有点浪费资源,占内存太大,一个博客服务器,配置比较低,用gitlab太浪费了.(公司使用gitlab,这个适合公司团队使用) 前提条件,放行git端口,防火墙添加放行规则,将3 ...

  3. Spring MVC 保存并获取属性参数

    在开发控制器的时候,有时也需要保存对应的数据到这些对象中去,或者从中获取数据.而Spring MVC给予了支持,它的主要注解有3个:@RequestAttribute.@SessionAttribut ...

  4. 【Leetcode_easy】965. Univalued Binary Tree

    problem 965. Univalued Binary Tree 参考 1. Leetcode_easy_965. Univalued Binary Tree; 完

  5. Node.js 服务端图片处理利器

    sharp 是 Node.js 平台上相当热门的一个图像处理库,其实际上是基于 C 语言编写 的 libvips 库封装而来,因此高性能也成了 sharp 的一大卖点.sharp 可以方便地实现常见的 ...

  6. ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists

    通过service mysql status 命令来查看mysql 的启动状态 报错如下: ERROR! MySQL is not running, but lock file (/var/lock/ ...

  7. vue 服务器Linux部署

    1.打包vue项目 执行命令npm  run  build,然后会生成一个文件夹dist,里面的文件就是打包文件. 2.上传vue的打包文件,放在合适的文件夹下,例如/var/www 3.配置ngin ...

  8. Kafka运维大全来了！优化、监控、故障处理

    Kafka运维大全来了!优化.监控.故障处理……   Kafka概念 Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一个分布式的 ...

  9. VC.DNS解析（winsock）

    1.尝试了 gethostbyname(...) 和 Qt598中的qhostinfo::fromname(...),都可以解析出来IP,但是有一个问题:域名指向的IP改变了,这两种方式需要等较长时间 ...

  10. iOS label出现异常黑色问题

    在开发中,有时候会发现label周围有一层灰色的边框,但是我们无论是修改边框的宽度还是颜色,这个边框一直是这个样子,不会发生任何变化. 类似上面这个,有一条条的竖线, 这是因为当设置 UILabel ...