使用js-xlsx导出.xlsx文件时如何设置单元格宽度

Question

我正在尝试使用js-xlsx为导出的excel文件设置固定的列/单元格宽度。

编辑：

以下是js-xlsx的来源：https://github.com/SheetJS/js-xlsx

Answer 1

我在这里找到了一个代码片段https://github.com/SheetJS/js-xlsx/blob/master/tests/write.js#L14-L19

快速参考，其中ws是您的工作表。

var wscols = [
    {wch:6},
    {wch:7},
    {wch:10},
    {wch:20}
];

ws['!cols'] = wscols;

Answer 2

类似于像元宽度，您可以通过以下方式设置像元高度

var wsrows =  [
                 {hpt: 12}, // row 1 sets to the height of 12 in points
                 {hpx: 16}, // row 2 sets to the height of 16 in pixels
               ];

ws['!rows'] = wsrows; // ws - worksheet

提示： ：如果工作表数据是自动生成的，并且您不知道填充了多少行和列，则可以使用以下方式查找工作表中用于进行单元格宽度/高度格式设置的行数和列数。

var range = XLSX.utils.decode_range(ws['!ref']);
var noRows = range.e.r; // No.of rows
var noCols = range.e.c; // No. of cols

Answer 3

扩展问题，如果您需要根据内容设置自动宽度，则可以编写如下内容：

.alert-success {
  z-index: 20;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert {
  padding: 15px;
  margin-bottom: 22px;
  border: 1px solid transparent;
  border-radius: 4px;
}

此函数假定您的第一行包含最多列。然后尝试通过计算内容字符长度来找到每列中最宽的单元格。

Answer 4

name,age,city
John,23,New York
FFF,45,London
Himsara,18,Adelaide

Answer 5

我使用@Icycool 的回答作为很好的例子。我也点赞了，因为它对我非常有用。

如果内容小于标题，我会使用可配置的默认宽度对其进行一些增强，并添加了一个缓冲区，使其看起来不会挤在一起。

添加了注释并进行了扩展以提高可读性

 return Object.keys(dataSource[0][0]).map((key) => {
  return ({
    //pick the data value that has the most content
    wch: Math
      .max(...dataSource[0]

        //Iterate over the column object and return a width for each one
        .map((dataObj: any) => {

          //Return the width as the number of chars with a buffer
          let keyWidth = key.toString().length
          let width = dataObj[key]?.toString().length ?? defaultColumnWidth
          width = width + columnWidthBuffer

          //use a default with if it's smaller than the title
          if (width < keyWidth) {
            width = keyWidth
          }
          return width
        })
      )
  })
});

Answer 6

没有什么新鲜的东西，但是显式使用width属性使维护起来更加容易：

ws['!cols'] = [{ width: 20 }, { width: 20 }, { width: 150 } ]; //set col. widths

尽管这里是您可以赋予这些ColInfo对象的属性的完整列表，它们给出了每个宽度存在的原因，但是它们指出您应该使用width> wpx> { {1}}，具体取决于您所使用的工作表的类型以及适用于您的用例的内容。可以在这里阅读更多内容：https://docs.sheetjs.com/