关于vue+elementui将表格数据导出为excel表格形式-CSDN博客

www.jianshu.com/p/7adf3f24e… 具体链接
1.引包
cnpm install file-saver@1.3.3 用来保存文件的
cnpm install --save-dev script-loader
由于由于这几个文件不支持import引入，所以我们需要script-loader来将他们挂载到全局环境下。
cnpm install jszip 导出为压缩文件
cnpm install xlsx excel处理库

2.创建一个文件夹，名字叫vendor，放在项目的src目录就可以了，里面放置三个文件，Blog.js，Export2Excel.js，Export2Zip.js，文件的具体内容你直接copy我下面写的就可以了,当然你也可以自行百度这些文件的内容，因为我也是直接复制过来的

Blob.js的配置
/* eslint-disable / / Blob.js

A Blob implementation.
2014-05-27
By Eli Grey, eligrey.com
By Devin Samarin, 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 purl.eligrey.com/github/Blob… / ;(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 FakeBlob.fake = FB_proto.fake = true while (file_ex_code--) { FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1 } if (!real_URL.createObjectURL) { URL = view.URL = {} } 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 = this.data.length = 0 } return FakeBlobBuilder })(view) view.Blob = function Blob(blobParts, options) { var type = options ? options.type || '' : '' var builder = new BlobBuilder() if (blobParts) { for (var i = 0, len = blobParts.length; i < len; i++) { builder.append(blobParts[i]) } } return builder.getBlob(type) } })( (typeof self !== 'undefined' && self) || (typeof window !== 'undefined' && window) || this.content || this )

Export2Excel.js的配置

/* eslint-disable / require('script-loader!file-saver') require('script-loader!@/vendor/Blob') 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(th, jsonData, defaultTitle) { / original data / var data = jsonData console.log('th', th) console.log('jsonData', jsonData) console.log('defaultTitle', defaultTitle) data.unshift(th) var ws_name = 'SheetJS' var wb = new Workbook(), ws = sheet_from_array_of_arrays(data) /设置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: 'xlsx', bookSST: false, type: 'binary' }) var title = defaultTitle || 'excel-list' saveAs( new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), title + '.xlsx' ) }

Export2Zip.js的配置

/* eslint-disable */ require('script-loader!file-saver') import JSZip from 'jszip' export function export_txt_to_zip(th, jsonData, txtName, zipName) { const zip = new JSZip() const txt_name = txtName || 'file' const zip_name = zipName || 'file' const data = jsonData let txtData = ${th}\r\n data.forEach(row => { let tempStr = '' tempStr = row.toString() txtData += ${tempStr}\r\n }) zip.file(${txt_name}.txt, txtData) zip.generateAsync({ type: 'blob' }).then( blob => { saveAs(blob, ${zip_name}.zip) }, err => { alert('导出失败') } ) }

给导出按钮注册事件，具体事件如下

ExportData () {
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = [
      '互联对象编号',
      '交易品名称',
      '交易品编号',
      '版本号',
      '价格（元）',
      '计价单位',
      '状态'
    ]
    const filterVal = [
      'interconnectionNumber',
      'tradeName',
      'subCenter',
      'versionNumber',
      'price',
      'valuationUnit',
      'state'
    ]
    const list = this.tableData3
    const data = this.formatJson(filterVal, list)
    excel.export_json_to_excel(tHeader, data)
  })
},
formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}
复制代码

上面的tableData3就是elementui里面的table组件绑定的数据
直接复制即可实现所需要的效果