问题:
这是今年在项目中遇到的一个需求,并且之前有个博客园的伙伴也问到过,当时很忙,没仔细去思考过,现在工作轻松一点了,写个总结,当是一个小笔记吧
思路及原理:
之前的导出我们在页面中设置了两个el-table标签,table1用来展示数据,另外一个table2负责导出数据(隐藏)。要导出指定的列,我们可以做的地方就在于控制隐藏的table2的列是否存在,这里我们使用v-if来控制,因为v-show仅仅是把元素的display属性设置为none,列依然存在,导出的时候还是导出全部列数据,所以使用v-if
效果展示:
这是表格显示的数据,有很多列的内容,下面先导出全都内容
导出指定列数据:这里我随便勾选四个列导出
基本的效果就是上面这样的了,全部数据那里的涂黑的部分是一些信息数据,隐藏一些不影响啥的,下面就直接放代码了。
1、安装插件并引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
2、因为使用的地方比较多,所以我将导出功能封装成一个组件,方便引用,代码如下
HTML部分:
<div class="excel-export-page">
<el-table v-show="false" id="exportTable" border height="300" :data="tableData">
<template v-for="(item, index) in exportFeild.tableCol">
<el-table-column
v-if="item.checked"
:key="index"
:property="item.property"
:label="item.colName"
/>
</template>
</el-table>
<div class="export-dialog">
<div style="display: flex;justify-content: space-between;align-items: center;">
<span>页码</span>
<div style="display: flex;align-items: center;">
<div>
<el-input v-model="pageStart" style="width: 80px;" @change="pagesChange" />
</div>
<!-- ~
<div>
<el-input v-model="pageEnd" style="width: 50px;" />
</div> -->
<span style="padding: 0 20px;">所有页</span>
<el-checkbox v-model="getMore" @change="exprotAll" />
</div>
</div>
<div style="color: blue;">联机下载最大记录数为1000
<span style="color: red;">(导出最大量数据请在空闲时操作)</span>
</div>
<div class="export-clomon-choice">
<div v-for="(item, index) in exportFeild.tableCol" :key="index" class="export-row-style">
<el-checkbox v-model="item.checked">{{ item.colName }}</el-checkbox>
</div>
</div>
<div class="export-btn-style">
<el-button type="primary" size="mini" icon="el-icon-download" @click="getExportDt">导出</el-button>
</div>
</div>
</div>
CSS部分:
<style lang="scss" scoped>
.excel-export-page {
width: 100%;
padding: 20px;
}
.export-dialog {
width: 100%;
}
.export-clomon-choice {
height: 150px;
border: 1px solid #AECAF0;
overflow-y: scroll;
margin-top: 2px;
.export-row-style {
border-top: 1px solid #ededed;
padding-left: 10px;
}
}
.export-btn-style {
padding: 10px;
display: flex;
justify-content: center;
}
</style>
JS部分:
<script>
import { postRequest } from '@/api/httpRequest.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import Vue from 'vue'
export default {
props: {
exportFeild: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
dict: Vue.filter('dict'), // 获取到全局字典过滤器方法
tableData: [],
getMore: false,
pageStart: 1,
maxPage: 0
}
},
watch: {
'exportFeild.currentPage': {
handler: function(newVal, oldVal) {
this.pageStart = newVal
},
deep: true
}
},
mounted() {
this.pageStart = this.exportFeild.currentPage
},
methods: {
// 是否导出最大量
exprotAll(val) {
if (val) {
this.pageStart = 1
} else {
this.pageStart = parseInt(this.exportFeild.qryParams.nextPage)
}
},
// 页码输入改变事件
pagesChange(val) {
if (this.getMore) {
const totalPg = Math.ceil(this.exportFeild.total / 1000)
if (this.pageStart > totalPg) {
this.pageStart = totalPg
}
} else {
const totals = Math.ceil(this.exportFeild.total / this.exportFeild.pageSize)
if (this.pageStart > totals) {
this.pageStart = totals
}
}
},
// 导出数据到Excel表
exportExcel(id) {
/* generate workbook object from table */
var xlsxParam = { raw: true } // 导出的内容只做解析,不进行格式转换
var wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam)
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), this.exportFeild.exportFileName)
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
},
// 获取导出的数据,与展示的表格数据不一定是一致的
getExportDt() {
if (!this.getMore) {
// 如果不是导出全部,则页码跟每页条数跟列表页一致
this.exportFeild.qryParams.nextPage = String(this.pageStart)
this.exportFeild.qryParams.everyPage = String(this.exportFeild.pageSize)
} else {
// 导出全部数据,可输入页码,让用户可选
this.exportFeild.qryParams.nextPage = String(this.pageStart)
this.exportFeild.qryParams.everyPage = '1000'
}
// 这里是我们是获取表格数据的请求方法,根据自己的项目请求方法切换一下就行
postRequest(this.exportFeild.qryParams, this.exportFeild.ck).then(response => {
if (response.rspCode === '0000') {
if (response.body.resultList) {
this.tableData = response.body.resultList
this.exportFeild.tableCol.forEach(item => {
if (item.dictionaryFlag) {
this.tableData.forEach(item2 => {
const feildAttr = item.property.includes('.')
if (!feildAttr) {
item2[item.property] = this.dict(item2[item.property], item.dictionaryStr)
} else {
// 如果字段是drftInf.drftAttr这样的,这样进行赋值
const part1 = item.property.split('.')[0]
const part2 = item.property.split('.')[1]
item2[part1][part2] = this.dict(item2[part1][part2], item.dictionaryStr)
}
// item2[item.property] = this.dict(item2[item.property], item.dictionaryStr)
})
}
})
setTimeout(() => {
this.exportExcel('#exportTable')
}, 500)
}
} else {
this.tableData = []
this.$message({
type: 'error',
message: response.rspMsg
})
}
}).catch(() => {})
}
}
}
</script>
在指定页面引入导出组件:
<el-dialog
:visible.sync="exportDialog"
width="500px"
title="XLSX导出"
@close="exportDialog=false"
>
<excel-page :export-feild="exportFeild" />
</el-dialog>
import excelPage from '@/views/common/print/excel-export/index.vue'
components: { excelPage },
data() {
return {
exportFeild: {} // 传入到组件的对象
}
},
method: {
// 导出到Excel,列表页导出按钮事件:
printPDF() {
if (this.tableData.length > 0) {
this.exportDialog = true
this.exportFeild = {
currentPage: this.currentPage,
pageSize: this.pageSize,
total: this.total,
tableCol: [
{ checked: true, colName: '业务编号', property: 'contNo' }, // 这里设置checked为true是默认勾选状态
{ checked: true, colName: '票据号码', property: 'drftNo' },
{ checked: true, colName: '票据来源', property: 'srcTyp', dictionaryFlag: true, dictionaryStr: 'srcTyp' },
{ checked: true, colName: '票据属性', property: 'drftAttr', dictionaryFlag: true, dictionaryStr: 'drftAttr' },
{ checked: true, colName: '票据种类', property: 'drftTyp', dictionaryFlag: true, dictionaryStr: 'drftTyp' },
{ checked: true, colName: '票据状态', property: 'drftStat', dictionaryFlag: true, dictionaryStr: 'drftStat' },
{ checked: true, colName: '票面金额(元)', property: 'isseAmt' },
{ checked: true, colName: '出票日', property: 'isseDt' },
{ checked: true, colName: '到期日', property: 'dueDt' },
{ checked: true, colName: '承兑人名称', property: 'accptrNm' },
{ checked: true, colName: '出票人名称', property: 'drwrNm' },
{ checked: true, colName: '出票人开户行名称', property: 'drwrBkNm' },
{ checked: true, colName: '收款人开户行名称', property: 'pyeeBkNm' },
{ checked: true, colName: '所属机构', property: 'orgId' },
{ checked: true, colName: '交易对手', property: 'custName' },
{ checked: true, colName: '经办人', property: 'jbStf' },
{ checked: true, colName: '交易日期', property: 'txnDt' }
],
qryParams: this.qryParams,
ck: 'CXGZCX001',
exportFileName: '票据交易查询.xlsx'
}
} else {
this.$alert('暂无数据', '提示', {
confirmButtonText: '确定',
confirmButtonClass: 'ticket-comfirm-btn',
callback: () => {}
})
}
}
}
最后组件引入这里的代码我就丢在一个框里展示了,偷懒一下
总结:其实思路的才是重点,之前小伙伴问怎么做导出指定列内容的时候一时间没想到,还特意去搜了下有没有特定的插件可以处理,没找到,后面工作遇到了,仔细想想原理,然后一边修改一边测就出来了,所以写出来当个笔记,也许会帮助到遇到导出指定内容问题的其他小伙伴,当是一个思路上的提示吧。