? ? ? ? Vue2中 前端界面導出表格，使用XLSXS插件版本(^0.8.13)導出表格存在表格背景顏色無法正常展示，百分比數據沒有正常展示 【有條件的盡量先升級高版本插件，此插件版本對樣式支持度不夠】
? ? ? ? 優先考慮插件版本升級 同樣的使用方法在vue3中沒有出現錯誤
? ? 以下為界面上表格，表格采用vxe-table組件? 整個表格的列均為動態計算得出
導出后的表格樣式丟失 且最后一行數據百分比不能正常展示
以下為封裝的批量倒出代碼 使用需根據項目自行更改
import FileSaver from 'file-saver'
import XLSXS from 'xlsx-style'export function exportMultiSheetExcel(tables, // [{ el: tableDom, name: 'Sheet1' }, ...]{fileName = '多Sheet表格',style,colWidth,callback, // 回調 對數據進行處理addCell,DataManipulationMethod}
) {const wb = XLSX.utils.book_new();tables.forEach(({ el, name, index }) => {const sheet = XLSX.utils.table_to_sheet(el);if (colWidth) sheet['!cols'] = colWidth;DataManipulationMethod && DataManipulationMethod(sheet, index);Object.keys(sheet).forEach((key) => {if (key.startsWith('!')) return;const cell = sheet[key];if (!cell || cell.v === '' || cell.v == null) return;cell.s = style || {};callback && callback(key, cell, sheet);});addCell && addCell(sheet);XLSX.utils.book_append_sheet(wb, sheet, name || 'Sheet');});const wbout = XLSXS.write(wb, {bookType: 'xlsx',type: 'binary',cellStyles: true})// 創建 Blob 并下載const blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'});const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = `${name || '表格'}.xlsx`;a.click();window.URL.revokeObjectURL(url);
}// 表格使用 ----------
import { exportMultiSheetExcel } from '@/utils'exportTable(){this.tableScheme.forEach((tableEle, index) => {// let ws = this.tableColumnHandle(tableEle.columns, this.$refs['scheme' + index][0])tables.push({el: this.$refs['scheme' + index][0].$el,// name: tableEle?.columns[0]?.title.replace(/\d{4}年/g, '').replace(/\d{2}月/g, '').replace(/:/g, '-').replace(/方案/g, ''),name: '123' + index, // sheet的名稱 注意名稱不能超過31個字符且不能包含：等字符index})})exportMultiSheetExcel(// 導出用隱藏的導出格式表格tables,{fileName: '方案',style: {alignment: {horizontal: 'center', // 水平居中對齊vertical: 'center',wrapText: true}},callback: (key, item, obj) => {if (key === 'B5') {console.log(key)item.s = {alignment: {horizontal: 'center', // 水平居中對齊vertical: 'center',wrapText: true},fill: {fgColor: { rgb: 'FFb0e1' }}}}},DataManipulationMethod: (data, index) => {console.log(data, 'dd')const fixedCode = ['A', 'B']const tableDataLength = this.tableScheme[index].data.length // 表格數據行數const headNum = 3 // 表頭占用行數const endNum = 2 // 表尾占用行數const keysArr = []// 非A 或者 B 開始的數據 需要刪除 表尾后的多余固定列臟數據 即 tableDataLength+headNum+endNum 之后的let maxNum = 0for (const key in data) {if (!key.includes('!')) {const num = key.replace(/[A-Za-z]/g, '') - 0if (num > maxNum) maxNum = numconst code = key.replace(/[0-9]/g, '')if (!keysArr.includes(code)) keysArr.push(code)if (fixedCode.includes(code) && headNum + 1 <= num && num <= tableDataLength + headNum) {if (data[key].v === '') {// 固定列替換成有數據的data[key] = data[key.replace(/[0-9]/g, '') + (num + tableDataLength + headNum + endNum)]}}}}// 刪除固定列臟數據keysArr.forEach(code => {for (let num = (tableDataLength + headNum + endNum + 1); num <= maxNum; num++) {delete data[`${code + num}`]}})}})
}插件使用過程中踩坑：
1，導出sheet名稱不符規范
? ? ? ?導出多個表格到同一個excel表格中的代碼參考如下
this.tableScheme.forEach((tableEle, index) => { let ws = this.tableColumnHandle(tableEle.columns, this.$refs['scheme' + index][0]) /// 表格部分數據處理wsArr.push({title: tableEle?.columns[0]?.title, ws: ws})})const wb = XLSX.utils.book_new();wsArr.forEach( item => { // excel表格 sheet名稱不能包含 ：號 31個字符內const sheetName = item.title.replace(/\d{4}年/g, '').replace(/\d{2}月/g, '').replace(/:/g, '-').replace(/方案/g, '')XLSX.utils.book_append_sheet(wb, item.ws, sheetName); // 此處添加到對應的sheet中})XLSX.writeFile(wb, '調時方案執行情況.xlsx');
excel中的sheet名稱要求如下：
style: {alignment: {horizontal: 'center', // 水平居中對齊vertical: 'center',wrapText: true},fill: {fgColor: { rgb: 'FFD6D6' } // 例如紅色背景}
},
2，表格背景色不展示
如果設置全局的顏色 可以顯示? 但是對單個背景色進行設置就不顯示了
全局直接在style中添加即可
style: {alignment: {horizontal: 'center', // 水平居中對齊vertical: 'center',wrapText: true},fill: {fgColor: { rgb: 'FFD6D6' } // 例如紅色背景}
},對單個背景色進行處理 在回調callback中進行條件判斷? 注意 必須整個item.s 一起寫 包括劇中 否則就不生效
callback: (key, item, obj) => { if (key === 'B5') {item.s = {alignment: {horizontal: 'center', // 水平居中對齊vertical: 'center',wrapText: true},fill: {fgColor: { rgb: 'FFb0e1' }}}}
},3，百分比格式設置之后不生效
正常情況只需要在回調callback中 或者?DataManipulationMethod 處理方法中對數據進行格式命名numFmt??即可
data[key].s = {alignment: { horizontal: 'center', vertical: 'center', wrapText: true },numFmt: '0.00%' // 只設置格式
}不生效在用以下方法 直接改為string格式
const percent = data[key].v * 100;data[key].v = Number.isInteger(percent)? `${percent}%`: `${percent.toFixed(2)}%`;data[key].t = 's'; // 明確設為字符串，防止 Excel 報錯
)
