案例以vue 和element 为例
element 按照 正常的使用方法 安装,使用
具体看导出步骤:
1.安装依赖项 :
npm i file-saver xlsx script-loader -D
2.下载 所需的js 文件
下载链接:https://download.csdn.net/download/qq_43101321/11674316 //这个需要积分
下载链接:https://pan.baidu.com/s/1bFqQJEGPaKECoxEpHcHR8A // 免费
提取码:3iqo
在 src 下创建目录,并将下方的js文件放到该目录
3.可以封装一个导出的组件 (方便复用)
新建一个导出组件:
<template title="导出表格">
<div>
<el-button
:type="type"
:list="list"
:t-header="tHeader"
:t-value="tValue"
@click="handleOutput"
>{{ text }}</el-button>
</div>
</template>
<script>
export default {
name: 'Educe',
props: {
list: {
type: Array,
default: function() {
return []
}
},
tHeader: {
type: Array,
default: function() {
return []
}
},
tValue: {
type: Array,
default: function() {
return []
}
},
text: {
type: String,
default: '导出'
},
type: {
type: String,
default: 'success'
}
},
methods: {
handleOutput() { // 导出
var that = this
require.ensure([], () => {
const { export_json_to_excel } = require('../vendor/Export2Excel') // 引入文件
const tHeader = that.tHeader
const filterVal = that.tValue// table表格中对应的属性名
const list = that.list // 想要导出的数据
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '用户列表')
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
}
</script>
<style scoped>
</style>
4.组件使用:
import Educe from ‘…/…/components/educe’ //你的组件名
tHeader : 表头
tValue:字段值
list: 表格数据
eg:
tHeader : [‘日期’, ‘姓名’, ‘地址’],
tValue:[‘date’, ‘name’, ‘address’],
到此结束