1糯崎，element-ui表格導(dǎo)出
????這個(gè)功能很容易實(shí)現(xiàn)砚婆，網(wǎng)上也有很多相關(guān)方法狠鸳，一般都是使用xlsx和file-saver傍妒，這里我直接貼上自己使用的封裝.
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// 定義導(dǎo)出Excel表格事件
export function outFile(id, fileName) {
/* 從表生成工作簿對(duì)象 */
var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
/* 獲取二進(jìn)制字符串作為輸出 */
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs(
// Blob 對(duì)象表示一個(gè)不可變蛉签、原始數(shù)據(jù)的類(lèi)文件對(duì)象胡陪。
// Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)沥寥。
// File 接口基于Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶(hù)系統(tǒng)上的文件柠座。
// 返回一個(gè)新創(chuàng)建的 Blob 對(duì)象邑雅，其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)組成。
new Blob([wbout], { type: 'application/octet-stream' }),
// 設(shè)置導(dǎo)出文件名稱(chēng)
fileName + '.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
上面這個(gè)js直接引入使用即可妈经。下面為使用：
// 引入
import { outFile } from '@/utils/excel'
//使用淮野，其中參數(shù)1為表格id，參數(shù)2為報(bào)表名稱(chēng)
outFile('cust', '(報(bào)表)')
2吹泡，表格導(dǎo)出數(shù)據(jù)重復(fù)問(wèn)題
????問(wèn)題產(chǎn)生：產(chǎn)生數(shù)據(jù)重復(fù)問(wèn)題主要是因?yàn)閑lement表格使用的時(shí)候使用了fixed屬性骤星，審查元素可發(fā)現(xiàn)，elementui的實(shí)現(xiàn)方式是：創(chuàng)建了兩個(gè)tabledom爆哑，通過(guò)一個(gè)隱藏一個(gè)顯示來(lái)實(shí)現(xiàn)交互效果洞难。當(dāng)我導(dǎo)出整個(gè)el-table 就會(huì)將兩個(gè)div內(nèi)的table都導(dǎo)出，導(dǎo)致數(shù)據(jù)重復(fù)揭朝。
????問(wèn)題解決：修改fixed屬性值即可队贱。這里重新構(gòu)造導(dǎo)出函數(shù)。
<el-table id="cust" :data="tableData" style="width: 100%" max-height="700px" border :header-cell-style="{background:'#EBEEF5',color:'#001528'}">
<el-table-column prop="name" label="名稱(chēng)" width="300" :fixed="fixs" :show-overflow- tooltip="true" />
<el-table-column
v-for="index of tableCol"
:key="index"
:prop="index-1+'s'"
:label="tableCol===24?(index-1)+colName:index+colName"
/>
</el-table>
<script>
export default {
data() {
return {
...
fixs: true
}
},
methods: {
excelOut() {
this.fixs = false
this.$nextTick(() => {
outFile('cust', '(報(bào)表)')
this.fixs = true
})
},
}
</script>
