如何在前端导出excel时设置为带千分位金额格式

银行业务要求页面显示千分符,我用的是replace(/B(?=(\d{3})+(?!\d))/g),',',现在业务要求增加一个导出当前页面数据生成excel的功能,之前的方法相当于加入了一个实体的逗号,导出excel时也是实体的逗号,业务不认可。我该怎么设置导出excel格式为金额。后台是java,数据返回是list,前端框架是react,内网开发无法导入别的包

如果你在React前端开发中想要导出Excel并设置带千分位金额格式,你可以使用JavaScript的xlsx库来实现这个功能。xlsx库是一个纯前端库,不需要依赖后台或其他包。

以下是一个示例代码,演示如何使用xlsx库导出带千分位金额格式的Excel文件:

首先,在你的React项目中安装xlsx库。可以使用npm或yarn命令来安装:

npm install xlsx --save

yarn add xlsx

接下来,在你的组件中导入xlsx库,并编写导出Excel的函数。下面是一个简单的示例:

import XLSX from 'xlsx';

// 导出Excel
const exportToExcel = (data) => {
  // 创建一个Workbook对象
  const workbook = XLSX.utils.book_new();

  // 将数据转换为Worksheet对象
  const worksheet = XLSX.utils.json_to_sheet(data);

  // 将自定义的样式应用到列上
  const format = XLSX.utils.format_cell;
  const customFormat = { "numFmt": "#,##0.00" };
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  for (let col = range.s.c; col <= range.e.c; col++) {
    const columnName = XLSX.utils.encode_col(col);
    for (let row = range.s.r + 1; row <= range.e.r; row++) {
      const cellRef = columnName + row;
      const cell = worksheet[cellRef];
      if (cell && cell.t === 'n') {
        worksheet[cellRef].z = customFormat.numFmt;
      }
    }
  }

  // 将Worksheet对象添加到Workbook中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 将Workbook对象转换为Excel二进制数据
  const excelData = XLSX.write(workbook, { type: 'binary' });

  // 保存Excel文件
  const blob = new Blob([s2ab(excelData)], { type: 'application/octet-stream' });
  saveAs(blob, 'data.xlsx');
}

// 字符串转字节数组
const s2ab = (s) => {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
};

// 用于保存Excel文件的函数
const saveAs = (blob, filename) => {
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;

  link.click();

  URL.revokeObjectURL(link.href);
}

在上述代码中,exportToExcel函数接收一个包含数据的数组作为参数,并使用xlsx库将数据转换为Excel文件。然后,我们通过在Worksheet对象的列中设置自定义格式,来设置带千分位金额的格式。

最后,我们将生成的Excel文件保存到用户的计算机上,通过创建一个下载链接实现。在下载链接上点击后,将会触发文件下载。

你可以在你的React组件中调用exportToExcel函数,并传入你要导出的数据数组。

需要注意的是,这段代码使用了Blob和DataURL对象,因此它可能无法在旧版本的浏览器中正常工作。

希望这可以帮助到你。

【以下回答由 GPT 生成】

我可以为您提供一个解决方案,但需要了解一下您的项目中是否使用了某个库或框架来处理前端导出的Excel文件。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^