js 实现导出excel表格
2021-09-30 本文已影响0人
web30
表头
第一种：.then嵌入式方法
// 导出excel
exportToExcel() {
this.isLoading = true
// 如认为这种写多个嵌入式方法不习惯的话，也可以把第一个方法抽出来(见下面第二种方法)
const params = { // 传参
PageNo: this.pagination.pageNum,
PageSize: this.pagination.pageSize
},
this.$requestInternet.get('/api/xxx', params }).then(res => {
this.isLoading = false
this.tableData = res.data || []
this.pagination.total = res.totalCount
}).then(res => {
// 这里对应表头，字段要和后端返回的保持一致
const fields = {
lsh: '流水号',
ddbh: '订单号',
dh: '单号',
mzh: '登记号',
xm: '姓名',
sjhm: '手机号',
ddje: '订单金额',
zffs: '支付方式',
fwlx: '服务类型',
ddlx: '订单类型',
zfzt: '费用状态',
zfsj: '支付时间'
}
// 拼接标题行
const head = Object.values(fields).map(item => {
return `<td>${item}</td>`
}).join('')
// 拼接数据行
const body = res.map(item => {
/* eslint-disable-next-line */
let res = `<tr style="mso-number-format:'\@';">` // 为了不让表格显示科学计数法
for (const key in fields) {
res += `<td>${item[key] != undefined ? item[key] : ''}</td>`
}
return res + '</tr>'
}).join('')
// Worksheet名
const worksheet = 'Sheet1'
const uri = 'data:application/vnd.ms-excel;base64,'
// 下载的表格模板数据
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table><tr>${head}</tr>${body}</table></body></html>`
// 下载模板
let link = document.createElement('a')
link.setAttribute('href', uri + window.btoa(unescape(encodeURIComponent(template))))
link.setAttribute('download', 'xx明细.xls')
link.click()
link = null
}).finally(() => {
this.isLoading = false
})
}
第二种：共用方法抽离出来
this.loadData(true).then(res => {
// 这里对应表头，字段要和后端返回的保持一致
const fields = {
lsh: '流水号',
ddbh: '订单号',
dh: '单号',
mzh: '登记号',
xm: '姓名',
sjhm: '手机号',
ddje: '订单金额',
zffs: '支付方式',
fwlx: '服务类型',
ddlx: '订单类型',
zfzt: '费用状态',
zfsj: '支付时间'
}
// 拼接标题行
const head = Object.values(fields).map(item => {
return `<td>${item}</td>`
}).join('')
// 拼接数据行
const body = res.map(item => {
/* eslint-disable-next-line */
let res = `<tr style="mso-number-format:'\@';">` // 为了不让表格显示科学计数法
for (const key in fields) {
res += `<td>${item[key] != undefined ? item[key] : ''}</td>`
}
return res + '</tr>'
}).join('')
// Worksheet名
const worksheet = 'Sheet1'
const uri = 'data:application/vnd.ms-excel;base64,'
// 下载的表格模板数据
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table><tr>${head}</tr>${body}</table></body></html>`
// 下载模板
let link = document.createElement('a')
link.setAttribute('href', uri + window.btoa(unescape(encodeURIComponent(template))))
link.setAttribute('download', '发票明细.xls')
link.click()
link = null
}).finally(() => {
this.isLoading = false
})
}
也可以参考：https://blog.csdn.net/hhzzcc_/article/details/80419396
