1.安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
2.项目中src下新建一个js文件夹放入两个文件 Blob.js和 Export2Excel.js
3.使用
onExport:function(){ // console.log('导出EXCEL'); const list = this.$refs.workpage.tableData; require.ensure([], () => { const {export_json_to_excel} = require('../../../js/Export2Excel.js'); const tHeader = ['手机号', '微信昵称']; //自己定义输出的数据 这是表格头部 const filterVal = ['mobile', 'nickname']; //对应数据中的字段名称 const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '导出' + new Date().getDates()); }); },
formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) },
4.附上 Blob.js和 Export2Excel.js 两个文件
Blob.js
/* eslint-disable */
/* Blob.js
* A Blob implementation.
* 2014-05-27
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/eboyjr
* License: X11/MIT
* See LICENSE.md
*/
/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
/*excel导入导出*/
(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];