1、下载两个依赖
npm install file-saver --save npm install xlsx@0.17.5 --save
2、封装成一个独立的组件outTable.vue
<template>
<el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
props: {
id: {
type: String,
default: 'Table'
},
name: {
type: String,
default: 'Table'
}
},
data () {
return {}
},
components: {},
methods: {
// 导出Excel表格
exportExcel () {
var xlsxParam = { raw: true }
var wb = XLSX.utils.table_to_book(
document.querySelector('#' + this.id),
xlsxParam
)
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream'
}),
this.name + '.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
}
}
</script>3、使用//引入组件
import outTable from '@/components/outTable.vue'
//标签
<outTable class="outTable" :id="outTableData.id" :name="outTableData.name"></outTable>
//注册组件
export default {
components: {
outTable
},
data () {
return {
outTableData: {
id: 'outTable',
name: '交易数据'
},
}
},
}
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）