vue-cli3导出表格excel,Export2Excel导出表格,导出多sheet excel,vue导出多页表格(好文章!!)

目录

(一)直接调用

(二)、封装导出函数调用


最近做项目中有一个导出excel表格的需求

具体思路是:后端返回给我json数据,前端根据数据和具体的几项字段去导出excel表格,还有导出多个sheet,多页表格到一个excel表里面,具体思路 根据Export2Excel插件,并修改插件Export2Excel完成导出多页(多个sheet)的excel

第一步:安装插件 依赖

1
2
3
4
5
npm install file-saver --save

npm install xlsx --save

npm install script-loader --save-dev

第二步、下载两个所需要的js文件Blob.js和 Export2Excel.js。

下载地址 微信扫描二维码下载

第三步、src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去

(一)直接调用

第一步,在.vue中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//引入字段过滤器时间过滤
import { parseTime } from "@/utils/setMethods"
 
 
 
handleDownload () {
      var excelDatas = [
        {
          tHeader: ["Id", "Title", "Author", "Readings", "Date"], // sheet表一头部
          filterVal: ["id", "title", "author", "pageviews", "display_time"], // 表一的数据字段
          tableDatas: this.list, // 表一的整体json数据
          sheetName: "sheet1"// 表一的sheet名字
        },
        {
          tHeader: ["序号", "标题", "作者", "服务"],
          filterVal: ["id", "title", "author", "reviewer"],
          tableDatas: this.list,
          sheetName: "sheet2"
        },
        {
          tHeader: ["序号", "名字", "描述"],
          filterVal: ["userId", "userName", "userDescription"],
          tableDatas: this.rolesList,
          sheetName: "sheet5555"
        }
      ]
 
      this.json2excel(excelDatas, "数据报表", true, "xlsx")
    },
    // tableJson 导出数据 ; filenames导出表的名字; autowidth表格宽度自动 true or false; bookTypes xlsx & csv & txt
    json2excel (tableJson, filenames, autowidth, bookTypes) {
      var that = this
//这个是引用插件
      import("@/vendor/Export2Excel").then(excel => {
        var tHeader = []
        var dataArr = []
        var sheetnames = []
        for (var i in tableJson) {
          tHeader.push(tableJson[i].tHeader)
          dataArr.push(that.formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
          sheetnames.push(tableJson[i].sheetName)
        }
        excel.export_json_to_excel({
          header: tHeader,
          data: dataArr,
          sheetname: sheetnames,
          filename: filenames,
          autoWidth: autowidth,
          bookType: bookTypes
        })
      })
    },
    // 数据过滤,时间过滤
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === "timestamp") {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }

第二步:修改插件Export2Excel导出多个sheet表格,导出多页

修改过的 Export2Excel.js 主要修改 export_json_to_excel 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
//Export2Excel.js
 
/* eslint-disable */
require("script-loader!file-saver")
import XLSX from "xlsx"
 
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
      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,
  sheetname,
  filename,
  merges = [],
  autoWidth = true,
  bookType = "xlsx"
} = {}) {
  /* original data */
  filename = filename || "excel-list"
  data = [...data]
 
  for (var i = 0; i < header.length; i++) {
    data[i].unshift(header[i])
  }
 
  // data.unshift(header)
 
  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }
 
  var ws_name = sheetname
  var wb = new Workbook(),
    ws = []
  for (var j = 0; j < header.length; j++) {
    ws.push(sheet_from_array_of_arrays(data[j]))
  }
 
  if (merges.length > 0) {
    if (!ws["!merges"]) ws["!merges"] = []
    merges.forEach(item => {
      ws["!merges"].push(XLSX.utils.decode_range(item))
    })
  }
  // console.log("width", autoWidth)
  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    var colWidth = []
    for (var k = 0; k < header.length; k++) {
      colWidth.push(
        data[k].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 = []
    for (var k = 0; k < colWidth.length; k++) {
      result[k] = colWidth[k][0]
      for (let i = 1; i < colWidth[k].length; i++) {
        for (let j = 0; j < colWidth[k][i].length; j++) {
          if (result[k][j]["wch"] < colWidth[k][i][j]["wch"]) {
            result[k][j]["wch"] = colWidth[k][i][j]["wch"]
          }
        }
      }
    }
    // 分别给sheet表设置宽度
    for (var l = 0; l < result.length; l++) {
      ws[l]["!cols"] = result[l]
    }
  }
 
  /* add worksheet to workbook */
  for (var k = 0; k < header.length; k++) {
    wb.SheetNames.push(ws_name[k])
    wb.Sheets[ws_name[k]] = ws[k]
  }
 
  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: "binary"
  })
  saveAs(
    new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
    }),
    `${filename}.${bookType}`
  )
}

Export2Excel.js 原文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
// Export2Excel.js
/* eslint-disable */
require('script-loader!file-saver');
import XLSX from 'xlsx'
 
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;
      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}`);
}

(二)、封装导出函数调用

在src中新建utils文件夹 ——> 新建文件setMethods.js

setMethods.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string}
 */
export function parseTime (time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"
  let date
  if (typeof time === "object") {
    date = time
  } else {
    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === "number" && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  // eslint-disable-next-line
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === "a") {
      return ["日", "一", "二", "三", "四", "五", "六"][value]
    }
    if (result.length > 0 && value < 10) {
      value = "0" + value
    }
    return value || 0
  })
  // eslint-disable-next-line
  return time_str
}
 
/**
 * Parse the json to excel
 *  tableJson 导出数据 ; filenames导出表的名字; autowidth表格宽度自动 true or false; bookTypes xlsx & csv & txt
 * @param {(Object)} tableJson
 * @param {string} filenames
 * @param {boolean} autowidth
 * @param {string} bookTypes
 */
export function json2excel (tableJson, filenames, autowidth, bookTypes) {
  import("@/vendor/Export2Excel").then(excel => {
    var tHeader = []
    var dataArr = []
    var sheetnames = []
    for (var i in tableJson) {
      tHeader.push(tableJson[i].tHeader)
      dataArr.push(formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
      sheetnames.push(tableJson[i].sheetName)
    }
    excel.export_json_to_excel({
      header: tHeader,
      data: dataArr,
      sheetname: sheetnames,
      filename: filenames,
      autoWidth: autowidth,
      bookType: bookTypes
    })
  })
}
// 数据过滤,时间过滤
function formatJson (filterVal, jsonData) {
  return jsonData.map(v =>
    filterVal.map(j => {
      if (j === "timestamp") {
        return parseTime(v[j])
      } else {
        return v[j]
      }
    })
  )
}

在需要使用到的 .vue文件组件中调用上面封装的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
//exportExcel.vue
 
<script>
import { parseTime } from "@/utils/setMethods"
import { json2excel } from "@/utils/setMethods.js"
export default {
  props: {
 
  },
  data () {
    return {
      listLoading: true,
      //表格的数据
      list: [
        {
          "id": 1,
          "timestamp": 375676396994,
          "author": "Melissa",
          "reviewer": "Angela",
          "title": "Gxjxpr Jdfjwf Lxssr Deyonm Moxy Ryxhzp Gxtukv Bvnmvmlo",
          "content_short": "mock data",
          "forecast": 29.75,
          "importance": 2,
          "type": "EU",
          "status": "published",
          "display_time": "1998-10-24 01:53:18",
          "comment_disabled": true,
          "pageviews": 1670,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 2,
          "timestamp": 14742538820,
          "author": "Anthony",
          "reviewer": "Angela",
          "title": "Ueeislixa Heid Dvcspjcuw Rrjyqi Wsqgyjsw",
          "content_short": "mock data",
          "forecast": 22.76,
          "importance": 2,
          "type": "JP",
          "status": "published",
          "display_time": "1990-03-21 05:30:52",
          "comment_disabled": true,
          "pageviews": 328,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 3,
          "timestamp": 1315789932004,
          "author": "Sharon",
          "reviewer": "Brian",
          "title": "Oofunoeoob Xreaujp Ndl Xoin Nyp Iedlihw Jlxyvu Ropkbfi Rljxpyl",
          "content_short": "mock data",
          "forecast": 36.57,
          "importance": 1,
          "type": "CN",
          "status": "deleted",
          "display_time": "1992-08-24 05:55:59",
          "comment_disabled": true,
          "pageviews": 1815,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 4,
          "timestamp": 538203551911,
          "author": "Scott",
          "reviewer": "Joseph",
          "title": "Yxrxsh Vwstgjqg Xqokntiuh Yrhsc Iiiugfk Hmoc",
          "content_short": "mock data",
          "forecast": 0.82,
          "importance": 2,
          "type": "US",
          "status": "draft",
          "display_time": "1982-10-19 21:06:25",
          "comment_disabled": true,
          "pageviews": 1575,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 5,
          "timestamp": 1171719793154,
          "author": "Barbara",
          "reviewer": "Angela",
          "title": "Xvewsrudv Sojbjzssbn Nqcnslcl Fwtx Sertvsqnnf Rxnom Jxhrdyqv Tyvktmi Dqeypf",
          "content_short": "mock data",
          "forecast": 22.84,
          "importance": 2,
          "type": "JP",
          "status": "published",
          "display_time": "1995-06-18 08:45:39",
          "comment_disabled": true,
          "pageviews": 1086,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 6,
          "timestamp": 98663463269,
          "author": "Dorothy",
          "reviewer": "Sharon",
          "title": "Jaeiqv Murhokxs Jeocvo Mdwf Ktgobp",
          "content_short": "mock data",
          "forecast": 84.76,
          "importance": 2,
          "type": "EU",
          "status": "published",
          "display_time": "1995-03-26 02:35:50",
          "comment_disabled": true,
          "pageviews": 1338,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 7,
          "timestamp": 846870802127,
          "author": "Richard",
          "reviewer": "Timothy",
          "title": "Hriiunzrh Jvt Xxtvpzype Gqoe Lkppdfbqh Txrfpgn Ykrloytzg Mgirqldy",
          "content_short": "mock data",
          "forecast": 35.18,
          "importance": 3,
          "type": "CN",
          "status": "draft",
          "display_time": "1973-07-02 19:02:43",
          "comment_disabled": true,
          "pageviews": 1335,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 8,
          "timestamp": 590582195083,
          "author": "George",
          "reviewer": "Helen",
          "title": "Tgcwifqcw Gogg Jsuypoa Hutu Rofnrslx Tntc Xehodrw Qrnsro Bcyilwymy",
          "content_short": "mock data",
          "forecast": 86.58,
          "importance": 2,
          "type": "US",
          "status": "draft",
          "display_time": "1980-06-28 20:47:17",
          "comment_disabled": true,
          "pageviews": 4937,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 9,
          "timestamp": 1548532983975,
          "author": "Brian",
          "reviewer": "Steven",
          "title": "Snasvoim Downll Npwbwionp Ihkdljs Yaxz Eugflokdf Hbevbqu Poukwladr Ahfkxfs",
          "content_short": "mock data",
          "forecast": 47.15,
          "importance": 2,
          "type": "CN",
          "status": "published",
          "display_time": "1993-01-05 23:12:51",
          "comment_disabled": true,
          "pageviews": 446,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 10,
          "timestamp": 1138507667384,
          "author": "Barbara",
          "reviewer": "Sandra",
          "title": "Elmpsxop Weih Bqimmtc Jnuv Stpuwnb Uouobwknbp Ntbq Jhxi Brqa Gmfowqi",
          "content_short": "mock data",
          "forecast": 49.13,
          "importance": 3,
          "type": "JP",
          "status": "draft",
          "display_time": "1995-07-06 04:31:51",
          "comment_disabled": true,
          "pageviews": 3377,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 11,
          "timestamp": 750337088505,
          "author": "Jose",
          "reviewer": "Sharon",
          "title": "Zzlns Pihvy Kgkok Xvcmm Fnryj Qulepu Khhnj Cpmy",
          "content_short": "mock data",
          "forecast": 88.75,
          "importance": 3,
          "type": "US",
          "status": "deleted",
          "display_time": "1974-11-21 19:51:59",
          "comment_disabled": true,
          "pageviews": 1965,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 12,
          "timestamp": 565505138784,
          "author": "Jennifer",
          "reviewer": "Edward",
          "title": "Kcqxrt Niwyrh Oop Dbbcmpjj Xstzd Obbucdnt Pprwq Puuclbxy Azzybptzc",
          "content_short": "mock data",
          "forecast": 97.64,
          "importance": 1,
          "type": "CN",
          "status": "published",
          "display_time": "1987-09-19 16:39:23",
          "comment_disabled": true,
          "pageviews": 488,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 13,
          "timestamp": 1109875948324,
          "author": "Laura",
          "reviewer": "Sharon",
          "title": "Hqbwqboqcb Fjixrn Sga Uioh Mjmxtbkom Nzsenp Wnqnrucee",
          "content_short": "mock data",
          "forecast": 44.47,
          "importance": 2,
          "type": "CN",
          "status": "published",
          "display_time": "2014-08-25 15:04:18",
          "comment_disabled": true,
          "pageviews": 2218,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 14,
          "timestamp": 1039817210594,
          "author": "Paul",
          "reviewer": "Ronald",
          "title": "Femyw Yvzgz Phhiht Svrxuoul Raxdisb Dpkhny Ynjrxxb Oykyn",
          "content_short": "mock data",
          "forecast": 93.17,
          "importance": 2,
          "type": "US",
          "status": "draft",
          "display_time": "2010-01-02 01:53:12",
          "comment_disabled": true,
          "pageviews": 2046,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 15,
          "timestamp": 1330523892167,
          "author": "Lisa",
          "reviewer": "Carol",
          "title": "Nqfdpohr Ovvodhn Agctq Dqtxloqo Wiqkrqds Lfkuy Nefqnwte Ryr",
          "content_short": "mock data",
          "forecast": 47.98,
          "importance": 2,
          "type": "US",
          "status": "draft",
          "display_time": "1999-12-12 15:07:15",
          "comment_disabled": true,
          "pageviews": 3265,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 16,
          "timestamp": 422707252878,
          "author": "Linda",
          "reviewer": "Kenneth",
          "title": "Hxguq Stg Xjpsiq Yhcstrkix Uljbt Xgdnb Vkowujuj Xse",
          "content_short": "mock data",
          "forecast": 20.19,
          "importance": 3,
          "type": "US",
          "status": "draft",
          "display_time": "1971-04-10 04:13:50",
          "comment_disabled": true,
          "pageviews": 564,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 17,
          "timestamp": 5845605622,
          "author": "Jeffrey",
          "reviewer": "Steven",
          "title": "Xzdix Miorfek Hqbkpuu Hwho Fqmhhpist Hitsf Unmh",
          "content_short": "mock data",
          "forecast": 32.68,
          "importance": 1,
          "type": "US",
          "status": "draft",
          "display_time": "1987-11-14 08:09:31",
          "comment_disabled": true,
          "pageviews": 2087,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 18,
          "timestamp": 272475524524,
          "author": "Joseph",
          "reviewer": "Sandra",
          "title": "Wmeim Uncmpq Iolymbvmdc Pkojiqc Utcskuu Qselvstud",
          "content_short": "mock data",
          "forecast": 94.84,
          "importance": 2,
          "type": "JP",
          "status": "draft",
          "display_time": "2012-12-16 01:54:13",
          "comment_disabled": true,
          "pageviews": 745,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 19,
          "timestamp": 590437287594,
          "author": "Karen",
          "reviewer": "Ruth",
          "title": "Gvred Vbdtfn Vbby Viokn Xzjyqri Dqi Dgkd Ttelcmi Spqmqo Sui",
          "content_short": "mock data",
          "forecast": 44.47,
          "importance": 3,
          "type": "JP",
          "status": "deleted",
          "display_time": "2013-11-21 06:36:17",
          "comment_disabled": true,
          "pageviews": 4950,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        },
        {
          "id": 20,
          "timestamp": 749752800977,
          "author": "Anthony",
          "reviewer": "Betty",
          "title": "Ccvicm Cttckbtw Esbeukpqvl Dmnt Eekplww Yjeqrxgc Vqhbyr Axhffgf",
          "content_short": "mock data",
          "forecast": 50.06,
          "importance": 2,
          "type": "US",
          "status": "draft",
          "display_time": "2012-02-04 03:48:46",
          "comment_disabled": true,
          "pageviews": 640,
          "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
          "platforms": [
            "a-platform"
          ]
        }
      ],
      rolesList: [
        {
          userId: 123,
          userNum: "admin", // 用户账号
          userName: "admin", // 用户名称
          userDescription: "这个账户是超级管理员账户"
        }, {
          userId: 124,
          userNum: "wxf123", // 用户账号
          userName: "张三", // 用户名称
          userDescription: "这个账户是一级管理员账户"
        }, {
          userId: 125,
          userNum: "cz123", // 用户账号
          userName: "李氏", // 用户名称
          userDescription: "这个账户是二级管理员账户"
        }
      ]
 
    }
  },
  computed: {
 
  },
  created () {
 
  },
  mounted () {
    this.listLoading = false
  },
  watch: {
 
  },
  methods: {
    //点击下载事件
    handleDownload () {
        //注意:组装的导出excel所需要的数据结构
      var excelDatas = [
        {
          tHeader: ["Id", "Title", "Author", "Readings", "Date"], // sheet表一头部
          filterVal: ["id", "title", "author", "pageviews", "display_time"], // 表一的数据字段
          tableDatas: this.list, // 表一的整体json数据
          sheetName: "sheet1"// 表一的sheet名字
        },
        {
          tHeader: ["序号", "标题", "作者", "服务"],
          filterVal: ["id", "title", "author", "reviewer"],
          tableDatas: this.list,
          sheetName: "sheet2"
        },
        {
          tHeader: ["序号", "名字", "描述"],
          filterVal: ["userId", "userName", "userDescription"],
          tableDatas: this.rolesList,
          sheetName: "sheet5555"
        }
      ]
        //   引入的函数
      json2excel(excelDatas, "数据报表", true, "xlsx")
    }
 
  },
  components: {
 
  },
  filters: {
    timestampToTime (val, timestamp) {
      return parseTime(val, timestamp)
    }
  }
}
</script>

亲测有效!! 欢迎留言交流

转载自:https://blog.csdn.net/csl125/article/details/90318432