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

news/2024/10/23 6:19:28/
  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更改样式并导出

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]];// 遍历工作表中的所有单元格for (const cellAddress in worksheet) {const cell = worksheet[cellAddress];// 检查单元格是否包含数字if (cell && cell.t === 'n') {// 将数字转换为文本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文件的样式等。 


http://www.ppmy.cn/news/1541252.html

相关文章

vue video播放m3u8监控视频

很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错 直接添加如下代码即可 html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false} 下面是完整组件示例 <template><div>…

【C++篇】深度解析类与对象(上)

目录 引言 一、类的定义 1.1类定义的基本格式 1.2 成员命名规范 1.3 class与struct的区别 1.4 访问限定符 1.5 类的作用域 二、实例化 2.1 类的实例化 2.2 对象的大小与内存对齐 三、this 指针 3.1 this指针的基本用法 3.2 为什么需要this指针&#xff1f; 3.3 t…

新手学STM32的话,先学标准库还是HAL库?

大家好&#xff0c;我是麦鸽&#xff0c;最近有网友提问 用STM32的话&#xff0c;是学标准库还是HAL库&#xff1f; 对于新手&#xff0c;我想说&#xff0c;不要和自己过不去&#xff0c;一开始不要搞得太难&#xff0c;要循序渐进。 新手经常会问的问题&#xff0c;先学51还是…

88.【C语言】文件操作(5)

目录 文件的随机读写 1.fseek函数 代码示例 运行结果 2.ftell函数 代码示例 运行结果 3.rewind函数 代码示例 运行结果 承接79.【C语言】文件操作(4)文章 文件的随机读写 1.fseek函数 声明:int fseek ( FILE * stream, long int offset, int origin ); 格式:fsee…

itext自定义pdf

pom坐标 <!-- https://mvnrepository.com/artifact/com.itextpdf/itextpdf --><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.13.3</version></dependency>字体文件可以…

go 包相关知识

在Go语言中&#xff0c;包的引用和搜索路径是由环境变量GOPATH和GO111MODULE共同决定的。 GOPATH环境变量&#xff1a;这个变量定义了默认的工作目录&#xff0c;Go命令行工具将会在这个目录下查找包文件。这个目录通常包含三个子目录&#xff1a;src、bin和pkg。 src目录包含…

解决Eclipse中’Run As’菜单缺少’Run on Server’选项的问题

解决Eclipse中’Run As’菜单缺少’Run on Server’选项的问题 问题描述&#xff1a; 当您在Eclipse中导入一个Web项目后&#xff0c;可能会发现在’Run As’菜单中没有’Run on Server’选项。这可能会让您无法方便地在本地服务器上运行和调试Web应用程序。 可能原因&#…

Qml-CheckBox的使用

Qml-CheckBox的使用 CheckBox属性 CheckBox的继承关系&#xff1a; CheckBox – AbstractButton – Control – Item; CheckBox的属性主要继承于AbstractButton。属性checkState&#xff1a;勾选状态&#xff0c;值为&#xff1a;Qt.Unchecked、Qt.Checked、Qt.PartiallyChec…