如何使用el-table實現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
更新時間：2024年03月14日 11:26:19 作者：愛寫代碼的小奶龍
我們?nèi)粘Ｗ鲰椖?特別是后臺管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下
今天我學(xué)習(xí)了如何使用el-table實現(xiàn)前端的導(dǎo)出功能，該方法的好處有無論你的el-table長什么樣子，導(dǎo)出之后就是什么樣子。
1.安裝三個插件
npm install file-save npm install xlsx npm install xlsx-style
2.創(chuàng)建Export2Excel.js
// 根據(jù)dom導(dǎo)出表格
import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'
import * as XLSXStyle from "xlsx-style";
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export function exportToExcel(idSelector, fileName, titleNum = 1) {
// 設(shè)置導(dǎo)出的內(nèi)容是否只做解析，不進(jìn)行格式轉(zhuǎn)換 false：要解析， true:不解析
const xlsxParam = { raw: true }
let table = document.querySelector(idSelector).cloneNode(true)
// 因為element-ui的表格的fixed屬性導(dǎo)致多出一個table，會下載重復(fù)內(nèi)容，這里刪除掉
if (table.querySelector('.el-table__fixed-right')) {
table.removeChild(table.querySelector('.el-table__fixed-right'))
}
if (table.querySelector('.el-table__fixed')) {
table.removeChild(table.querySelector('.el-table__fixed'))
}
const wb = XLSX.utils.table_to_book(table, xlsxParam)
let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref'])
let cWidth = []
for (let C = range.s.c; C < range.e.c; ++C) { //SHEET列
let len = 100 //默認(rèn)列寬
let len_max = 400 //最大列寬
for (let R = range.s.r; R <= range.e.r; ++R) { //SHEET行
let cell = { c: C, r: R } //二維 列行確定一個單元格
let cell_ref = XLSX.utils.encode_cell(cell) //單元格 A1、A2
if (wb.Sheets['Sheet1'][cell_ref]) {
// if (R == 0){
if (R < titleNum) {
wb.Sheets['Sheet1'][cell_ref].s = { //設(shè)置第一行單元格的樣式 style
alignment: {
horizontal: 'center',
vertical: 'center'
}
}
} else {
wb.Sheets['Sheet1'][cell_ref].s = {
alignment: {
horizontal: 'center',
vertical: 'center'
}
}
}
//動態(tài)自適應(yīng)：計算列寬
let va = JSON.parse(JSON.stringify(wb.Sheets['Sheet1'][cell_ref].v))
var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g) //匹配中文
var card11 = ''
if (card1) {
card11 = card1.join('')
}
var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, '') //剔除中文
let st = 0
if (card11) {
// st += card11.length * 16 //中文字節(jié)碼長度
st += card11.length * 20 //中文字節(jié)碼長度
}
if (card2) {
// st += card2.length * 8 //非中文字節(jié)碼長度
st += card2.length * 10 //非中文字節(jié)碼長度
}
if (st > len) {
len = st
}
}
}
if (len > len_max) {//最大寬度
len = len_max
}
cWidth.push({ 'wpx': len }) //列寬
}
wb.Sheets['Sheet1']['!cols'] = cWidth
const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
try {
saveAs(new Blob([s2ab(wbout)], { type: '' }), `${fileName}.xlsx`)
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
}
3.按需引入
<template>
<div>
<el-table id='table'>
//形式一
<el-table-column>
<template>
<span>可以用插槽形式</span>
</template>
</el-table-column>
//形式二
<el-table-column lable=可以用這種形式' prop='xxx'/>
//形式三（不可用）
<el-table-column>
<template>
<el-input v-model=''/>//該方式無法識別到
</template>
</el-table-column>
</el-table>//給表格一個id
<el-button @click='demo'>導(dǎo)出</el-button>
</div>
</template>
<script>
import { exportToExcel } from '@/Export2Excel'
export default{
data(){
return{}
},
methods:{
demo(){
exportToExcel('#table', '導(dǎo)出名稱')//id選擇器,導(dǎo)出名稱,調(diào)用這個方法就可以了
}
}
}
</script>4.vue.config.js引入
//在這個方法里面
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解壓縮靜態(tài)文件
new CompressionPlugin({
cache: false, // 不啟用文件緩存
test: /\.(js|css|html)?$/i, // 壓縮文件格式
filename: '[path].gz[query]', // 壓縮后的文件名
algorithm: 'gzip', // 使用gzip壓縮
minRatio: 0.8 // 壓縮率小于1才會壓縮
})
],
//加入這三行
externals: [{
'./cptable': 'var cptable'
}]
},效果：
擴展：
當(dāng)我們會出現(xiàn)這樣的表格需求時，如果只是用v-if判斷，導(dǎo)出來會全部也有，因為我們只做了v-if的判斷
實現(xiàn)代碼如下：
<span v-if="index===0">{{scope.row.xxxx}}</span>//如果是第一行就顯示值
<span v-else></span>//如果不是就為空這樣就可以防止只需要第一個行數(shù)據(jù)的時候其他還會顯示的問題。
總結(jié)
到此這篇關(guān)于如何使用el-table實現(xiàn)純前端導(dǎo)出的文章就介紹到這了,更多相關(guān)el-table純前端導(dǎo)出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3中依賴注入provide、inject的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue是一種流行的JavaScript框架,可以幫助開發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實現(xiàn)登錄驗證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了解決vue scoped html樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用element實現(xiàn)上傳圖片和修改圖片功能
前幾天做到一個關(guān)于圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于vue使用element實現(xiàn)上傳圖片和修改圖片功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
最近小編遇到這樣的需求，要實現(xiàn)一個新聞?wù)故卷摴δ?，剛接到這樣的需求還真是一頭霧水，不知從哪入手，今天小編通過實例代碼給大家介紹下vue實現(xiàn)新聞?wù)故卷摰牟襟E詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點，開發(fā)靈活，并且打包之后體積更小速度更快,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue AST源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關(guān)鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來和大家剖析一下v-slot的相關(guān)特性,需要的可以了解下2025-01-01
詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決
這篇文章主要介紹了詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01