htmlToExcel.js
javascript
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
const htmlToExcel = {
getExcel(dom, title = '默认标题') {
var excelTitle = title
var wb = XLSX.utils.table_to_book(document.querySelector(dom))
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(
new Blob([wbout], { type: 'application/octet-stream' }),
excelTitle + '.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
}
export default htmlToExcel
<template>
<div>
<!--导出按钮-->
<el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
<el-input
style="width: 200px"
placeholder="请输入搜索内容"
v-model="inputSearch"
>
<i slot="prefix" class="el-input__icon el-icon-search" @click="search()"></i>
</el-input>
<!--原始表格-->
<el-table
:data="tableData"
height="500px"
fixed="left"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="helpKeywordId"
label="helpKeywordId"
>
</el-table-column>
<el-table-column
prop="name"
label="name"
>
</el-table-column>
</el-table>
<!--预览弹窗表格-->
<el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
<el-table :data="selectData" id="selectTable" height="380px">
<el-table-column
prop="helpKeywordId"
label="helpKeywordId"
>
</el-table-column>
<el-table-column
prop="name"
label="name"
>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="exportExcel">确定保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import htmlToExcel from '@/utils/htmlToExcel'
import axios from 'axios'
export default {
name: 'ExcelPage',
data() {
return {
inputSearch: '',
// 表格数据
tableData: null,
// 表格中选中的数据
selectData: [],
selectWindow: false
}
},
methods: {
// 导出
exportExcel() {
htmlToExcel.getExcel('#selectTable', '导出的自定义标题')
},
// 显示预览弹窗
exportExcelSelect() {
if (this.selectData.length < 1) {
this.$message.error('请选择要导出的内容!')
return false
}
this.selectWindow = true
},
// 选中数据
handleSelectionChange(val) {
this.selectData = val
},
search() {
}
},
created() {
axios.get('http://localhost:9090/findAll').then((response) => {
this.tableData = response.data
console.log(response.data)
})
}
}
</script>
<style>
</style>