前端将cvs格式数据导出为Excel表

  1. 使用ExcelJS库:ExcelJS(也称为SheetJS)是一个强大的JavaScript库,它允许在浏览器和Node.js中处理Excel文件。你可以使用它来读取CSV文件的内容,并将其转换为Excel格式。以下是一个基本的示例代码:
    import XLSX from 'xlsx';
    
    // 假设csvString是你的CSV文件内容
    const csvString = 'data:text/csv;charset=utf-8,Name,Age,City\nJohn,30,New York\nJane,25,Los Angeles';
    
    // 将CSV字符串转换为工作簿对象
    const workbook = XLSX.read(csvString, { type: 'string' });
    
    // 将工作簿对象转换为Excel文件并触发下载
    XLSX.writeFile(workbook, 'exported-file.xlsx');

  2. 使用PapaParse库:PapaParse是一个专门用于解析CSV文件的JavaScript库,它也支持将CSV数据导出为Excel文件。使用PapaParse,你可以这样操作:
    import Papa from 'papaparse';
    
    const csvData = `Name,Age,City
    John,30,New York
    Jane,25,Los Angeles`;
    
    Papa.unparse(csvData, {
      header: true,
      quotes: true,
      skipEmptyLines: true
    }, (result) => {
      const blob = new Blob([result], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'exported-file.xlsx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });

  3. 使用FileReader API:如果你有一个CSV文件,你可以使用HTML5的FileReader API来读取文件内容,然后使用上述库之一将其转换为Excel格式。以下是一个示例:
    <input type="file" id="csvFileInput" />
    document.getElementById('csvFileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
    
      reader.onload = function(e) {
        const csvData = e.target.result;
        // 使用ExcelJS或PapaParse将CSV数据转换为Excel格式
      };
    
      reader.readAsText(file);
    });

  4. 使用第三方服务或库:除了上述方法,还可以使用第三方服务或库,如file-saverxlsx-style,来实现CSV到Excel的转换,并设置单元格的样式。这些库通常提供了更多的定制选项,如设置单元格居中、边框等样式 。

 这是我使用xlsx实现简单的excel更改样式并导出

// 处理时间函数
function excelSerialToJsDate(serial: number): Date {
  // Excel 日期序列号的起始日期是 1900 年 1 月 1 日
  const baseDate = new Date(1899, 11, 30); // 1899 年 12 月 30 日
  const millisecondsInDay = 24 * 60 * 60 * 1000;
  return new Date(baseDate.getTime() + (serial - 1) * millisecondsInDay);
}
// 转换成yyyy-mm-dd hh-mm-ss 格式时间函数
function formatExcelDate(serial: number): string {
  const date = excelSerialToJsDate(serial);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const listExport = async (value) => {
  //请求参数
  const params = {
    ...value
  };

  // 显示成功消息,告知用户导出成功并正在下载
  createMessage.success('导出成功,正在下载~');

  // 调用 API 导出数据,获取 Blob 数据
  const res: {
    data: Blob;
  } = await getText(params, { isReturnNativeResponse: true });

  // 创建一个 FileReader 实例,用于读取 Blob 数据
  var reader = new FileReader();
  
  // 读取 Blob 数据为文本
  reader.readAsText(res.data, 'utf-8');
  
  // 当文件读取完成后执行的回调函数
  reader.onload = function (e) {
    // 将读取到的文本数据解析为 Excel 工作簿对象
    const workbook = XLSX.read(reader.result, { type: 'string' });
    
    // 获取工作簿中的第一个工作表
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    
    //用来匹配时间序列正则
    let regex = /^\d{1,2}\/\d{1,2}\/\d{2}$/    

    // 遍历工作表中的所有单元格
    for (const cellAddress in worksheet) {
      const cell = worksheet[cellAddress];
      
      // 检查单元格是否包含数字
      if (cell && cell.t === 'n') {
        //处理时间正则匹配455开头的数字 如果时间被转化为这种格式的话可以使用这个判断
        if (regex.test(cell.v)) {
          cell.v = formatExcelDate(cell.v)//转换时间格式为yyyy-mm-dd hh-mm-ss
          continue; //跳出循环
        };
        // 将数字转换为文本 防止变为 2.41009E+13 形式
        cell.t = 's';
        cell.v = cell.v.toString();
      }
    }
    
    // 获取工作表的范围
    const range = XLSX.utils.decode_range(worksheet['!ref'] as string);
    
    // 计算列数
    const colCount = range.e.c - range.s.c + 1; // 列数

    // 初始化列宽数组
    const columnWidths: any = [];
    
    // 设置每列的默认宽度为20个字符
    for (let i = 0; i < colCount; i++) {
      columnWidths.push({ wch: 20 });
    }
    
    // 将列宽设置应用到工作表
    worksheet['!cols'] = columnWidths;
    
    // 将工作簿对象转换为 Excel 文件并触发下载
    XLSX.writeFile(workbook, `Excel导出文件名`);
  }
};

选择哪种方法取决于你的具体需求,比如是否需要在客户端处理大量数据,是否需要支持旧版浏览器,以及是否需要自定义Excel文件的样式等。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值