两个男性做网站,企业网站手机版源码下载,网页打不开网络正常怎么办,一个公司可以做几个网站这篇说一下使用xlsx-style导出excel时样式的设置。需要安装xlsx、xlsx-style、file-saver插件#xff08;file-saver可以不装#xff0c;用a标签代替也可以#xff09;#xff0c;安装时可能会碰到一些报错问题#xff0c;可以去看下我之前一篇博客#xff1a;纯前端导出…这篇说一下使用xlsx-style导出excel时样式的设置。需要安装xlsx、xlsx-style、file-saver插件file-saver可以不装用a标签代替也可以安装时可能会碰到一些报错问题可以去看下我之前一篇博客纯前端导出Excel并修改样式
由于上次写的修改样式只关注了单元格的宽度并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题所以这篇来说下。
我们通过xlsx可以通过dom元素、或者数据来生产sheet页然后我们修改样式就操作对应的sheet页就可以了。
直接上代码如下
我这个是直接通过传入dom生产的sheet页也可以通过数据生成sheet页xlsx都有对应的方法其实不影响我们修改样式 。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。
import * as XLSX from xlsx
import FileSaver from file-saver
import XLSXS from xlsx-style/*** 根据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]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,},bold: true,numFmt: 0}// 单元格宽度data[!cols].push({ wpx });// 根据不同行添加单元格背景颜色let color let num Number(key.slice(1))if (num 12) {color f8cbad} else if (num 12 num 22) {color 70ad47} else if (num 22 num 26) {color 00b0f0} else if (num 26 num 29) {color fff2cc} else if (num 29 num 44) {color a9d08e} else {color bfbfbf}data[key].s.fill { fgColor: { rgb: color, patternType: solid } }}}}
}//给合并行列赋值样式
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];range.forEach(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) {ws[cols[i] k] ws[cols[k] item.e.r] || 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) 0xffreturn buf
}
调用
exportExcelByDom(document.getElementById(custom-table), 生产日报表.xlsx)
然后下面是我开发的表格长这个样子 上面两种图片是一个表格哈比较长其实下面还有然后导出的效果是这样子
