一、安装依赖
npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
二、下载两个所需的js文件Blob.js和Export2Excel.js
链接: https://pan.baidu.com/s/1CNcEncW-fjFDyinEo5J2Qw
提取码:5qwz
三、在src目录下新建vendor文件夹、将Blob.js和Export2Excel.js两个文件放进去
四、Vue部分(UI用的ElmentUI)
HTML:
<el-button type="primary" size="medium" @click="export2Excel">导出</el-button>
<el-table-column type="selection" width="35" v-model="multipleSelection">
</el-table-column>
data():
data() {
return {
multipleSelection: [],
}
},
methods:
//导出表格
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
if (this.multipleSelection.length) {
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'name', 'number', 'shopId', 'desc']
const list = this.multipleSelection
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel(tHeader, data, 'table')
})
} else {
this.$message({
message: '请至少勾选一项,再进行操作',
type: 'warning'
});
}
}
注:如果出现saveAs错误,多半是依赖包file-saver的版本有错,换一个版本,npm i file-saver@1.3.3 ,再试试看是否已经好了呢?!