使用 javascript 在 react 中将 excel 转换为 csv 或将 csv 转换为 excel-ag凯发旗舰厅

使用 javascript 在 react 中将 excel 转换为 csv 或将 csv 转换为 excel

将 excel 转换为 csv 和将 csv 转换为 excel 是日常办公和数据处理中的常见操作，尤其在跨平台数据交换和集成的过程中尤为重要。excel（.xlsx）文件是一种功能强大的电子表格格式，它不仅支持存储大量的数据，还允许用户使用复杂的公式、图表、数据透视表、条件格式化等高级功能，广泛应用于财务分析、数据分析、报告生成等场景。而 csv（逗号分隔值）文件则是一种简单的文本格式，它通过逗号作为分隔符来分隔数据，每一行代表一条记录，数据不包含任何格式化信息、公式或图表。这篇文章将介绍如何使用 spire.xls for javascript 在 react 中将 excel 文档转换为 csv 格式和将 csv 文档转换为 excel 格式。

安装 spire.xls for javascript

要在 react 应用程序中实现将 excel 转换为 csv 和将 csv 转换为 excel，首先需要下载 spire.xls for javascript，或者通过进行安装：

npm i spire.xls

安装完成后，将 spire.xls.base.js 和 spire.xls.base.wasm 文件复制到项目的 public 文件夹中。

详细的安装和配置步骤，请参考此教程：如何在 react 项目中集成 spire.xls for javascript

在 react 中将 excel 转换为 csv

spire.xls for javascript 提供了 worksheet.savetofile() 方法，允许开发者将工作簿中的特定工作表保存为独立的 csv 文件。使用 spire.xls for javascript 将 excel 工作表转换为 csv 的核心步骤如下：

使用 wasmmodule.workbook.create() 方法创建一个 workbook 对象。
使用 workbook.loadfromfile() 方法加载 excel 文件。
使用 workbook.worksheets.get(index) 方法获取特定的工作表。
使用 worksheet.savetofile() 方法将工作表保存为 csv 格式。

javascript

import react, { usestate, useeffect } from 'react';
function app() {
  // 保存已加载的wasm模块
  const [wasmmodule, setwasmmodule] = usestate(null);
  // 在组件挂载时加载wasm模块
  useeffect(() => {
    const loadwasm = async () => {
      try {
        // 通过全局窗口对象访问模块和spirexls
        const { module, spirexls } = window;
        // 在初始化运行时设置wasmmodule状态
        module.onruntimeinitialized = () => {
          setwasmmodule(spirexls);
        };
      } catch (err) {
        // 记录加载过程中出现的任何错误
        console.error('加载wasm模块失败:', err);
      }
    };
    // 创建一个script元素来加载wasm javascript文件
    const script = document.createelement('script');
    script.src = `${process.env.public_url}/spire.xls.base.js`;
    script.onload = loadwasm;
    // 将script添加到文档的body中
    document.body.appendchild(script);
    // 在组件卸载时执行删除script的清理函数
    return () => {
      document.body.removechild(script);
    };
  }, []); 
  // 执行将excel工作表转换为csv的函数
  const exceltocsv = async () => {
    if (wasmmodule) {
      // 将输入文件加载到虚拟文件系统（vfs）中
      const inputfilename = '示例.xlsx';
      await wasmmodule.fetchfiletovfs(inputfilename, '', `${process.env.public_url}/`);
      
      // 创建一个新的工作簿
      const workbook = wasmmodule.workbook.create();
      // 加载现有的excel文档
      workbook.loadfromfile({ filename: inputfilename });
      // 获取第一个工作表
      let sheet = workbook.worksheets.get(0);
      // 指定输出csv文件路径
      const outputfilename = 'exceltocsv.csv';
      // 将工作表保存为csv
      sheet.savetofile({
        filename: outputfilename, 
        separator: ",", 
        encoding: wasmmodule.encoding.get_utf8()
      });
      
      // 读取保存的文件并转换为blob对象
      const modifiedfilearray = wasmmodule.fs.readfile(outputfilename);
      const modifiedfile = new blob([modifiedfilearray], { type: 'text/csv' });
      
      // 为blob创建一个url并启动下载
      const url = url.createobject;
      const a = document.createelement('a');
      a.href = url;
      a.download = outputfilename;
      document.body.appendchild(a);
      a.click(); 
      document.body.removechild(a); 
      url.revokeobject; 
      // 清理工作簿使用的资源
      workbook.dispose();
    }
  };
  return (
    
      使用 javascript 在 react 中将 excel 转换为 csv 或将 csv 转换为 excel-ag凯发旗舰厅
      
    
  );
}
export default app;

react 应用程序编译成功后，将在默认网页浏览器中打开，通常是。

react 应用程序编译成功

点击“转换”就能下载转换的 csv 文件。

在 react 中将 excel 转换为 csv

在 react 中将 csv 转换为 excel

spire.xls for javascript 中的 workbook.loadfromfile() 方法也可以用于加载 csv 文件。加载完成后，开发者可以使用 workbook.savetofile() 方法将其保存为 excel 文件。使用 spire.xls for javascript 将 csv 文件转换为 excel 的核心步骤如下：

使用 wasmmodule.workbook.create() 方法创建一个 workbook 对象。
使用 workbook.loadfromfile() 方法加载 csv 文件。
使用 workbook.worksheets.get(index) 方法获取特定的工作表。
使用 cellrange.ignoreerroroptions 属性忽略在将特定单元格范围内的数字保存为文本时可能出现的错误。
使用 cellrange.autofitcolumns() 方法自动调整列宽。
使用 workbook.savetofile() 方法将 csv 文件保存为 excel 格式。

javascript

import react, { usestate, useeffect } from 'react';
function app() {
  // 保存已加载的wasm模块
  const [wasmmodule, setwasmmodule] = usestate(null);
  // 在组件挂载时加载wasm模块
  useeffect(() => {
    const loadwasm = async () => {
      try {
        // 通过全局窗口对象访问模块和spirexls
        const { module, spirexls } = window;
        // 在初始化运行时设置wasmmodule状态
        module.onruntimeinitialized = () => {
          setwasmmodule(spirexls);
        };
      } catch (err) {
        // 记录加载过程中出现的任何错误
        console.error('加载wasm模块失败:', err);
      }
    };
    // 创建一个script元素来加载wasm javascript文件
    const script = document.createelement('script');
    script.src = `${process.env.public_url}/spire.xls.base.js`;
    script.onload = loadwasm;
    // 将script添加到文档的body中
    document.body.appendchild(script);
    // 在组件卸载时执行删除script的清理函数
    return () => {
      document.body.removechild(script);
    };
  }, []);
  // 执行将csv文件转换为excel的函数
  const csvtoexcel = async () => {
    if (wasmmodule) {
      // 将输入文件加载到虚拟文件系统（vfs）中
      const inputfilename = 'sample.csv';
      await wasmmodule.fetchfiletovfs(inputfilename, '', `${process.env.public_url}/`);
      // 创建一个新的工作簿
      const workbook = wasmmodule.workbook.create();
      // 加载现有的csv文件
      workbook.loadfromfile({ filename: inputfilename, separator: ",", row: 1, column: 1 });
      // 获取第一个工作表
      let sheet = workbook.worksheets.get(0);
      // 忽略转换过程中将数字保存为文本时可能的错误
      sheet.range.get("a1:e7").ignoreerroroptions = wasmmodule.ignoreerrortype.numberastext;
      // 自动调整工作表中已使用范围的列宽
      sheet.allocatedrange.autofitcolumns();
      // 指定输出excel文件路径
      const outputfilename = 'csvtoexcel.xlsx';
      // 保存修改后的工作簿到指定路径
      workbook.savetofile({ filename: outputfilename, version: wasmmodule.excelversion.version2010 });
      // 读取保存的文件并转换为blob对象
      const modifiedfilearray = wasmmodule.fs.readfile(outputfilename);
      const modifiedfile = new blob([modifiedfilearray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      // 为blob创建一个url并启动下载
      const url = url.createobject;
      const a = document.createelement('a');
      a.href = url;
      a.download = outputfilename;
      document.body.appendchild(a);
      a.click();
      document.body.removechild(a);
      url.revokeobject;
      // 清理工作簿使用的资源
      workbook.dispose();
    }
  };
  return (
    
      
      
    
  );
}
export default app;

申请临时 license

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用javascript。获取有效期 30 天的临时许可证。