用xlsx-style设置表格的高度,宽度,颜色,字体等

参考资料,讲的不错,他用的是node-xlsx
我只用了xlsx,xlsx-style所以修改这个方法就行了

// xlsx-style版本0.8.13
// xlsx版本0.14.1 
//这是xlsx-style文件中的xlsx.js的需要修改的代码,是从xlsx文件夹中的xlsx.js中复制出来的
// write_ws_xml_data找到找个方法名字,全部替换
// 把xlsx中能修改高度的代码复制到xlsx-style中
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {
	var o = [], r = [], range = safe_decode_range(ws['!ref']), cell="", ref, rr = "", cols = [], R=0, C=0, rows = ws['!rows'];
	var dense = Array.isArray(ws);
	var params = ({r:rr}), row, height = -1;
	for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);
	for(R = range.s.r; R <= range.e.r; ++R) {
		r = [];
		rr = encode_row(R);
		for(C = range.s.c; C <= range.e.c; ++C) {
			ref = cols[C] + rr;
			var _cell = dense ? (ws[R]||[])[C]: ws[ref];
			if(_cell === undefined) continue;
			if((cell = write_ws_xml_cell(_cell, ref, ws, opts, idx, wb)) != null) r.push(cell);
		}
		if(r.length > 0 || (rows && rows[R])) {
			params = ({r:rr});
			if(rows && rows[R]) {
				row = rows[R];
				if(row.hidden) params.hidden = 1;
				height = -1;
				if (row.hpx) height = px2pt(row.hpx);
				else if (row.hpt) height = row.hpt;
				if (height > -1) { params.ht = height; params.customHeight = 1; }
				if (row.level) { params.outlineLevel = row.level; }
			}
			o[o.length] = (writextag('row', r.join(""), params));
		}
	}
	if(rows) for(; R < rows.length; ++R) {
		if(rows && rows[R]) {
			params = ({r:R+1});
			row = rows[R];
			if(row.hidden) params.hidden = 1;
			height = -1;
			if (row.hpx) height = px2pt(row.hpx);
			else if (row.hpt) height = row.hpt;
			if (height > -1) { params.ht = height; params.customHeight = 1; }
			if (row.level) { params.outlineLevel = row.level; }
			o[o.length] = (writextag('row', "", params));
		}
	}
	return o.join("");
}

vue中的代码修改

// 复制的修改宽度的代码,直接改的高度和参数,应该是可以和宽度的代码整合到一起的。项目紧,我还没看,先记录一下,随后我再融合一下
const colHeight = data.map(row => row.map(val => {
      /*先判断是否为null/undefined*/
      if (val == null) {
        return {
          'hpx': 40
        };
      }
      /*再判断是否为中文*/
      else if (val.toString().charCodeAt(0) > 255) {
        return {
          'hpx': 40
        };
      } else {
        return {
          'hpx': 40
        };
      }
    }))
    console.log(colHeight)
    /*以第一行为初始值*/
    let result1 = colHeight[0];
    for (let i = 1; i < colHeight.length; i++) {
      for (let j = 0; j < colHeight[i].length; j++) {
        if (result1[j]['hpx'] < colHeight[i][j]['hpx']) {
          result1[j]['hpx'] = colHeight[i][j]['hpx'];
        }
      }
    }
    ws['!rows'] = result1;
  }

 //单独设置某一个格子的主标题样式
dataInfo["A1"].s = {
    font: {
      name: '宋体',
      sz: 10,
      color: {rgb: "ffffff"},
      bold: true,
      italic: false,
      underline: false,
      height: 20
    },
    alignment: {
      horizontal: "center",
      vertical: "center"
    },
    fill: {
      fgColor: {rgb: "C0504D"},
    },
  };

  // 统一设置某一个行的样式,for循环里的myRowFont是外不传过来的参数在这个export_json_to_excel方法里传进来的
  var tableTitleFont = {
    font: {
      name: '宋体',
      sz: 10,
      color: {rgb: "ffffff"},
      bold: true,
      italic: false,
      underline: false
    },
    alignment: {
      horizontal: "center",
      vertical: "center"
    },
    fill: {
      fgColor: {rgb: "C0504D"},
    },
  };

  for (var b in dataInfo) {
    if (b.indexOf(myRowFont) > -1) {
      dataInfo[b].s = tableTitleFont
    }
  }

你可能感兴趣的:(html,vue,jszip)