当前位置:首页 » 《关于电脑》 » 正文

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

22 人参与  2024年10月26日 13:20  分类 : 《关于电脑》  评论

点击全文阅读


使用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');

使用PapaParse库:PapaParse是一个专门用于解析CSV文件的JavaScript库,它也支持将CSV数据导出为Excel文件。使用PapaParse,你可以这样操作:

import Papa from 'papaparse';const csvData = `Name,Age,CityJohn,30,New YorkJane,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);});

使用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);});

使用第三方服务或库:除了上述方法,还可以使用第三方服务或库,如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://zhangshiyu.com/post/177991.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1