React中如何使用XLSX将对象数组导出为Excel，并重置表头，设置行高和列宽

在React项目的TypeScript文件中，因为原生的JavaScript或TypeScript并没有提供直接的Excel导出功能，常用的Excel导出方法通常涉及使用第三方库。
本文介绍两种Excel文件的导出方式： xlsx 与 js-export-excel
文章部分内容纯手打，可能部分代码会出现格式错误。

XLSX导出Excel

xlsx是一个功能强大的库，它允许你创建、读取和写入Excel文件。这个库提供了丰富的API来操作Excel工作簿、工作表和单元格。你可以使用它来生成Excel文件，并将其作为Blob对象下载。本文只是简单介绍如何使用去导出数据。

首先需要在你的react项目中进行安装依赖：
npm install xlsx
npm install file-saver

import React from 'react';
import * as XLSX from 'xlsx';  
import { saveAs } from 'file-saver';
 
export const UseXLSXExportExcelFile: React.FC = () => {
	// 数据准备，需要一个对象数组，获取数据时如果不是对象数组要修改数据格式。
	const data = [  
  		{ name: 'John', age: 30, sex: '男' },  
  		{ name: 'Jane', age: 25, sex: '女' }  
	];  

	const handleExportButton = () => {
		// 创建工作簿和工作表  
		const wb = XLSX.utils.book_new();  
		const ws = XLSX.utils.json_to_sheet(data); // 假设data是你的数据数组  
		 
		// 将工作表添加到工作簿  
		XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');  
		 
		// 导出Excel文件  
		const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });  
		const blob = new Blob([wbout], { type: 'application/octet-stream' }); 
		// 调用saveAs函数，传入Blob对象和我们想要保存的文件名。这将会触发浏览器的下载功能，让用户可以将文件保存到他们的设备上。 
		saveAs(blob, 'output.xlsx'); // 使用FileSaver.js来保存文件
	}
	return (
		<div>
			<button onClick={handleExportButton} >导出按钮</button>
		</div>
	);
}

在ts文件中使用file-saver依赖的时候会出现隐式类型错误：文章最后也有几种解决办法

解决方式： npm i --save-dev @types/file-saver
或者： npm i --save-dev @types/file-saver --f （强制执行）

---

XLSX导出Excel，重置表头，设置行高和列宽

在xlsx库中，直接设置 行高 和 列宽 并不是非常直观，但可以通过操作工作表 (worksheet) 的 !rows 和 !cols 属性来实现。

import XLSX from 'xlsx';

// 假设这是你的数据数组
const data = [
  { id: 1, name: 'jack' },
  { id: 2, name: 'john' },
  // ... 其他数据项
];

// 定义表头，将键名转换为汉字标题
const headers = {
  id: '序号',
  name: '名字'
  // ... 其他键名与对应标题
};

// 将数组数据转换为工作表，并设置行高和列宽
function arrayToWorksheet(data, headers) {
  const ws = XLSX.utils.json_to_sheet(data);
  
  // 设置列宽
  const columnWidths = {
    'A': { width: 15 }, // 假设第一列是序号，列标为A
    'B': { width: 30 }  // 假设第二列是名字，列标为B
    // ... 其他列宽设置
  };
  ws['!cols'] = Object.keys(columnWidths).map(key => ({
    s: { c: XLSX.utils.decode_col(key) },
    e: { c: XLSX.utils.decode_col(key) },
    wpx: columnWidths[key].width * 256 / 96 // 将像素转换为Excel的宽度单位
  }));

  // 设置行高（假设所有行高都相同）
  const defaultRowHeight = 20; // 设置默认行高为20（单位：磅）
  ws['!rows'] = ws['!rows'] || [];
  data.forEach((_, rowIndex) => {
    ws['!rows'][rowIndex] = { hpx: defaultRowHeight * 20 }; // 将磅转换为Excel的行高单位
  });

  // 遍历工作表的列，设置标题
  const range = XLSX.utils.decode_range(ws['!ref']);
  for (let R = range.s.r; R <= range.e.r; ++R) {
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const cell_address = { c: C, r: R };
      const headerKey = Object.keys(headers)[C - range.s.c];
      if (R === range.s.r && headerKey) {
        ws[XLSX.utils.encode_cell(cell_address)] = { t: 's', v: headers[headerKey] };
      }
    }
  }
  
  return ws;
}

// 导出为Excel文件
function exportToExcel(data, headers, fileName = 'export.xlsx') {
  const ws = arrayToWorksheet(data, headers);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  XLSX.writeFile(wb, fileName);
}

exportToExcel(data, headers);

其中， columnWidths 对象定义了每列的宽度，其中键是列的字母标识（如’A’、'B’等），值是包含 width 属性的对象，表示该列的宽度（以像素为单位）。通过 ws['!cols'] 设置了每列的宽度，注意宽度需要转换为Excel使用的单位（通常是1/96英寸）。

对于行高，为 ws['!rows'] 数组中的每一项设置 hpx 属性，它表示以像素为单位的行高。同样，行高也需要转换为Excel的行高单位（通常是1/20磅）。

请注意，xlsx库使用的是较为底层的方式处理Excel文件，因此涉及到一些单位转换和内部结构的理解。这里提供了一个基本的框架，读者可以自行根据实际需求调整列宽和行高的设置。

---

js-export-excel 导出Excel

js-export-excel 是一个相对简单的库，它专门用于导出数据到Excel。虽然它的功能可能没有xlsx那么全面，但它对于基本的导出需求来说可能足够了。

首先需要在你的react项目中进行安装依赖：
npm install js-export-excel

import * as ExportJsonExcel from 'js-export-excel';  

export const UseJsExportExcel: React.FC = () => {
	// 数据准备，需要一个对象数组，获取数据时如果不是对象数组要修改数据格式。
	const data = [  
  		{ name: 'John', age: 30, sex: '男' },  
  		{ name: 'Jane', age: 25, sex: '女' }  
	];  
	 
	// 配置导出选项  
	const options = {  
	  fileName: 'Users',  
	  datas: [  
	    {  
	      sheetData: data,  
	      sheetName: 'Sheet1',  
	      sheetFilter: ['name', 'age', 'sex'],  
	      sheetHeader: ['Name', 'Age', '性别'],  
	    }  
	  ]  
	};  
	const handleExportButton = () => {
		// 导出Excel  
		ExportJsonExcel(options);
	}
	return (
		<div>
			<button onClick={handleExportButton} >导出按钮</button>
		</div>
	);
}	

请注意，由于 js-export-excel 不是一个 TypeScript 库，所以在使用它时，TypeScript 可能会报一些类型错误。有以下以下几种解决方法：

• 忽略类型错误：你可以在你的 TypeScript 配置文件（tsconfig.json）中设置 “noImplicitAny”: false 来忽略隐式的 any 类型错误。
• 自定义类型声明：你可以创建一个 .d.ts 文件（例如 js-export-excel.d.ts），并在这个文件中为 js-export-excel 提供自定义的类型声明。
• 使用第三方类型声明文件：去社区看看是否有为 js-export-excel 提供的类型声明文件，然后 npm 安装。