9 changed files with 428 additions and 195 deletions
@ -0,0 +1,180 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import FileSaver from 'file-saver'; |
||||
import XLSXS from 'xlsx-style-vite'; |
||||
import { getObjType, isNumber } from '@/utils/util'; |
||||
|
||||
/** |
||||
* 根据DOM进行导出 |
||||
* @param {Element} dom |
||||
* @param {String} fileName |
||||
*/ |
||||
export function exportExcelByDom(dom, fileName) { |
||||
const book = XLSX.utils.book_new(); |
||||
const sheet = XLSX.utils.table_to_sheet(dom); |
||||
|
||||
XLSX.utils.book_append_sheet(book, sheet, 'Sheet1'); |
||||
addRangeBorder(sheet['!merges'], sheet); // 给合并行列赋值样式
|
||||
setExcelStyle(sheet); // 设置样式
|
||||
let wbout = XLSXS.write(book, { |
||||
bookType: 'xlsx', |
||||
bookSST: false, |
||||
type: 'binary', |
||||
}); |
||||
try { |
||||
FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), fileName); |
||||
} catch (e) { |
||||
console.error(e, wbout, '----->>>'); |
||||
} |
||||
} |
||||
|
||||
// 设置导出Excel样式（统一样式）
|
||||
function setExcelStyle(data, wpx = 80) { |
||||
data['!cols'] = []; |
||||
const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']; |
||||
console.log('data :>> ', data); |
||||
for (let key in data) { |
||||
if (data.hasOwnProperty(key)) { |
||||
if (!excludes.includes(key)) { |
||||
data[key].s = { |
||||
alignment: { |
||||
horizontal: 'center', //水平居中对齐
|
||||
vertical: 'center', // 垂直居中
|
||||
wrapText: true, |
||||
}, |
||||
border: { |
||||
top: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
bottom: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
left: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
right: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
}, |
||||
// fill: {
|
||||
// fgColor: { rgb: "00a2ff" },
|
||||
// },
|
||||
font: { |
||||
sz: 11, |
||||
color: { |
||||
rgb: '000000', |
||||
}, |
||||
}, |
||||
bold: true, |
||||
numFmt: 0, |
||||
}; |
||||
const _text = data[key].v; |
||||
getObjType(_text) === 'string' && (data[key].v = _text.replace('-->', '')); |
||||
// 单元格宽度
|
||||
data['!cols'].push({ wpx }); |
||||
// 根据不同行添加单元格背景颜色
|
||||
let color = 'ffffff'; |
||||
// 文字颜色
|
||||
let textColor = '000000'; |
||||
let num = Number(key.slice(1)); |
||||
num = isNumber(num) ? num : Number(key.slice(2)); |
||||
if (num === 1) { |
||||
color = '172e60'; |
||||
textColor = 'ffffff'; |
||||
data[key].s.font.sz = 16; |
||||
} else { |
||||
} |
||||
data[key].s.fill = { |
||||
fgColor: { rgb: color, patternType: 'solid' }, |
||||
}; |
||||
|
||||
data[key].s.font.color.rgb = textColor; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//给合并行列赋值样式
|
||||
function addRangeBorder(range, ws) { |
||||
let cols = [ |
||||
'A', |
||||
'B', |
||||
'C', |
||||
'D', |
||||
'E', |
||||
'F', |
||||
'G', |
||||
'H', |
||||
'I', |
||||
'J', |
||||
'K', |
||||
'L', |
||||
'M', |
||||
'N', |
||||
'O', |
||||
'P', |
||||
'Q', |
||||
'R', |
||||
'S', |
||||
'T', |
||||
'U', |
||||
'V', |
||||
'W', |
||||
'X', |
||||
'Y', |
||||
'Z', |
||||
'AA', |
||||
'AB', |
||||
'AC', |
||||
'AD', |
||||
'AE', |
||||
'AF', |
||||
'AG', |
||||
]; |
||||
console.log('range :>> ', range); |
||||
range.forEach(item => { |
||||
console.log('item :>> ', item); |
||||
let style = { |
||||
s: { |
||||
border: { |
||||
top: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
bottom: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
left: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
right: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
// 处理合并行
|
||||
for (let i = item.s.c; i <= item.e.c; i++) { |
||||
ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style; |
||||
// 处理合并列
|
||||
for (let k = item.s.r + 2; k <= item.e.r + 1; k++) { |
||||
// console.log(' ws[cols[k] + item.e.r] :>> ', ws[cols[k] + item.e.r]);
|
||||
ws[cols[i] + k] = ws[cols[i] + k] || style; |
||||
} |
||||
} |
||||
}); |
||||
return ws; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
Loading…
Reference in new issue