导出Excel组件
任务场景:上传图片生成表格(百度api)展示表格内容并可以导出成Excel(前端实现)
-
前端导出表格为Excel文件,就封装了一个按钮可以直接点击然后导出表格(记录一下)
效果展示
具体实现 (组件篇)
// 首先要引入两个js文件 别人封好的 Blob.js和Export2Excel.js这两个网上很多可以直接去下载
// 或者npm下载也可以
<template>
<div v-if="flag">
<slot></slot>
</div>
</template>
<script>
export default {
/*
columns: [{title: '', key: 'date'},{title: '', key: 'name'},{title: '', key: 'address'}],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
父组件点击事件
click () {
this.exportTableFlag = false
// 这里面写数据的处理
this.$nextTick(() => {
this.exportTableFlag = true
this.$refs.exportTableRef.exportData()
})
}
*/
props: {
columns: {
require: true,
Object: Array
},
tableData: {
require: true,
Object: Array
},
tableName: {
require: false,
default: '数据列表',
Object: String
},
btnName: {
require: false,
default: '导出表格',
Object: String
},
flag: {
require: true,
default: false,
Object: Boolean
}
},
data() {
return {
e_columns: [],
e_tableData: []
}
},
watch: {
columns: {
handler (newV) {
this.e_columns = newV
},
deep: true,
immediate: true
},
tableData: {
handler (newV) {
this.e_tableData = newV
},
deep: true,
immediate: true
}
},
mounted () {
// this.$nextTick(() => {
// this.$on('exportData', function () {
// console.log(this.e_tableData)
// })
// })
},
methods: {
// 由父组件通过ref直接调用
exportData () {
this.$emit('exportData')
console.log(this.e_tableData)
console.log(this.e_columns)
this.export2Excel(this.e_columns, this.e_tableData)
},
export2Excel(columns,list){
require.ensure([], () => {
const { export_json_to_excel } = require('./excel/Export2Excel');
let tHeader = []
let filterVal = []
console.log(columns)
if(!columns){
return;
}
columns.forEach(item =>{
tHeader.push(item.title)
filterVal.push(item.key)
})
const data = list.map(v => filterVal.map(j => v[j]))
export_json_to_excel(tHeader, data, this.tableName);
})
}
}
}
</script>
<style>
</style>
具体地方使用
<export-table ref="exportTableRef" :columns="columns" :tableData="tableData" :flag="exportTableFlag">
<el-button type="primary" @click="createdExcel" style="margin-top: 20px" size="small">生成Excel表格</el-button>
</export-table>
// 不知道为啥直接父组件直接调用时,子组件的watch监听不到,所以使用了v-if来让子组件能够监听到数据变化
import exportTable from '@/components/Common/exportTable/exportTable'
components: {
exportTable
},
data () {
return {
exportTableFlag: false
}
},
methods: {
// 把数据处理成子组件需要的数据 我这儿由于下方加了一个操作按钮,所以需要把操作按钮干掉,所以写了这些逻辑
// 点击之前先隐藏按钮 然后调用方法前再显示 页面上没有任何消失显示的效果
createdExcel () {
console.log(this.imgTableList)
this.exportTableFlag = false
this.columns = []
this.tableData = []
let tableObj = {}
this.imgTableList.map((item, index) => {
if (index === 0) {
item.map((item1, index1) => {
this.columns.push({
title: item1.word,
key: item1.column
})
})
} else if (index !== this.imgTableList.length - 1) {
item.map((item2, index2) => {
tableObj[item2.column] = item2.word
})
this.tableData.push(tableObj)
tableObj = {}
}
})
console.log(this.columns)
console.log(this.tableData)
this.$nextTick(() => {
this.exportTableFlag = true
// 调用子组件导出表格方法
this.$refs.exportTableRef.exportData()
})
},
}