01-xlsx_xlsxstyle样式单元格超出26(Z)的宽度设置+单元格为undefined和null样式无效问题

问题一: xlsxstyle样式单元格超出26(Z)的宽度设置

问题场景: 根据网上的代码Cols都只设置A-Z, 在使用中出现超过Z的列数, 发现Z之后(AA,AB,BA,BB)的列数宽度都取第一个字符的宽度(AA取A, BA取B), 不符合开发要求, 要求自定义宽度.

产生原因: data[‘!cols’].push()取值有误. 只取了字符串的第一个字符key[0]

data['!cols'].push(Cols[key[0]]);

解决: 在Cols中增加"AA","AB"等等超出26的wpx, 在data[‘!cols’].push()中判断取值

setStyle(data) {
 let Cols = {                
     "A": { wpx: 50 },       
     "B": { wpx: 135 },                
     "C": { wpx: 85 },                
     "D": { wpx: 65 },                
     "E": { wpx: 90 },                
     "F": { wpx: 60 },                
     "G": { wpx: 60 },                
     "H": { wpx: 60 },                
     "I": { wpx: 60 },                
     "J": { wpx: 60 },                
     "K": { wpx: 80 },                
     "L": { wpx: 70 },                
     "M": { wpx: 70 },                
     "N": { wpx: 150 },               
     "O": { wpx: 45 },               
     "P": { wpx: 45 },                
     "Q": { wpx: 45 },                
     "R": { wpx: 115 },                
     "S": { wpx: 115 },                
     "T": { wpx: 115 },                
     "U": { wpx: 120 },                
     "V": { wpx: 70 },                
     "W": { wpx: 70 },                
     "X": { wpx: 70 },                
     "Y": { wpx: 70 },                
     "Z": { wpx: 70 },                
     "AA": { wpx: 90 },                
     "AB": { wpx: 100 },            
 };
 let borderAll = {  //单元格外侧框线                
   top: {                    
        style: 'thin',                
    },                
    bottom: {                    
        style: 'thin'                
    },                
    left: {                    
        style: 'thin'                
    },                
    right: {                    
        style: 'thin'                
    }            
};            
data['!cols'] = [];            
for (let key in data) {              
    if (data[key] instanceof Object) {                
       data[key].s = {                        
           border: borderAll,                        
           alignment: {                           
               horizontal: 'center',   //水平居中对齐                            
               vertical: 'center'                        
           },                        
           font: {                            
               sz: 11                        
           },                        
           bold: true,                        
           numFmt: 0                    
       }                   
       data['!cols'].push(Cols[key.substring(0, key.length == 2 ? 1 : 2)]);   // key的长度, 26之前key为'A1''B1''A2', 26之后key为'AA1''AA2''ZA1'               
    }           
}         
return data;
}

问题二: 单元格为undefined和null样式无效问题

当数组中的元素为undefined或null时, xlsx不会处理.

const data = [["1", "", "", undefined, "", null, "2", NaN, "1"]];

后续循环设置样式后导出表格得出:

解决

方法一: for循环替换undefined或null为"".

DealData(arr) {            
    for (var i = 0; i < arr.length; i++) {  
        for (var j = 0; j < arr[i].length; j++) {          
            if (arr[i][j] == undefined || arr[i][j] == null) {
               arr[i][j] = ""; 
            }                
        }            
    }            
    return arr;        
}

方法二: 使用 ||.

 const data = [["1", "", "", undefined || "", '', null || "", "2", "1"]]

一般场景

var res = [
    {
    	"Index": 1,
    	"name": "Tom",
    	"age": 12
    },{
    	"Index": 2,
    	"name": "Jane",
    	"age": 10
    },{
    	"Index": 3,
    	"name": undefined,
    	"age": null
    }
]
const headers = ["序号", "姓名", "年龄"];
const data = res.map(item => [item.Index, item.name, item.age]);
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data]);

针对可能存在undefined或null的属性进行 || 处理.

const data = res.map(item => [item.Index, item.name || "", item.age || ""]);

结束.