1.cd至项目目录
2.安装
npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
3.src目录下新建一个文件夹命名为vendor
4.Blob.js 和 Export2Excel.js文件放到vendor文件夹下(下面有Blob.js和Export2Excel.js)
5.修改Export2Excel.js文件中的
require('script-loader!file-saver');
//修改前
//require('script-loader!src/vendor/Blob');修改这一句
//修改后
require('script-loader!@/vendor/Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
6.在要导出文件的vue文件中
data(){
return{
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods:{
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
let that = this;
require.ensure([], () => {
//这里的require的路径要写对,不然运行会有错误
const { export_json_to_excel } = require('@/vendor/Export2Excel');
const tHeader = [that.columns1[0].title, that.columns1[1].title, that.columns1[2].title];
const filterVal = [that.columns1[0].key, that.columns1[1].key, that.columns1[2].key];
const list = that.data1;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '商品管理列表');
})
}
}
7.最后写一个触发export2Excel()函数的容器
<button @click="export2Excel">导出</button>
8.最后无误的话导出成功
9.附上Blob.js和Export2Excel.js文件:
/* Blob.js
* A Blob, File, FileReader & URL implementation.
* 2018-08-09
*
* By Eli Grey, http://eligrey.com
* By Jimmy Wärting, https://github.com/jimmywarting
* License: MIT
* See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/
;(function(){
var global = typeof window === 'object'
? window : typeof self === 'object'
? self : this
var BlobBuilder = global.BlobBuilder
|| global.WebKitBlobBuilder
|| global.MSBlobBuilder
|| global.MozBlobBuilder;
global.URL = global.URL || global.webkitURL || function(href, a) {
a = document.createElement('a')
a.href = href
return a
}
var origBlob = global.Blob
var createObjectURL = URL.createObjectURL
var revokeObjectURL = URL.revokeObjectURL
var strTag = global.Symbol && global.Symbol.toStringTag
var blobSupported = false
var blobSupportsArrayBufferView = false
var arrayBufferSupported = !!global.ArrayBuffer
var blobBuilderSupported = BlobBuilder
&& BlobBuilder.prototype.append
&& BlobBuilder.prototype.getBlob;
try {
// Check if Blob constructor is supported
blobSupported = new Blob(['ä']).size === 2
// Check if Blob constructor supports ArrayBufferViews
// Fails in Safari 6, so we need to map to ArrayBuffers there.
blobSupportsArrayBufferView = new Blob([new Uint8Array([1,2])]).size === 2
} catch(e) {}
/**
* Helper function that maps ArrayBufferViews to ArrayBuffers
* Used by BlobBuilder constructor and