需求虽小但是问题很多，浅谈JavaScript导出excel文件

news2024/10/7 5:25:14

最近我在进行一些前端小开发，遇到了一个小需求：我想要将数据导出到 Excel 文件，并希望能够封装成一个函数来实现。这个函数需要接收一个二维数组作为参数，数组的第一行是表头。在导出的过程中，要能够确保避免出现中文乱码的情况。另外，考虑到数组中可能包含回车、逗号、换行符等特殊字符，咱们该如何处理这些情况呢？

解决方案

1、导出CSV文件

将一个二维数组导出为CSV文件，这种操作比较简单，这里咱们不直接依赖外部库，使用纯JavaScript在浏览器中导出CSV文件，具体的操作步骤可以如下所示：

  1. 将二维数组中的每一行数据转换为CSV格式，但是要确保特殊字符（如回车、逗号、emoji等）被正确处理
  2. 添加UTF-8 BOM（Byte Order Mark）以确保生成的CSV文件在处理中文时不会出现乱码。
  3. 创建一个Blob对象，将CSV数据转换为一个包含MIME类型为text/csv;charset=utf-8;的Blob。
  4. 创建一个不可见的<a>标签，设置href为Blob对象的URL，并设置download属性为导出的文件名。
  5. 模拟点击该链接以触发下载，然后移除该链接。

示例代码：

/**
 * 将二维数组导出为CSV文件并下载
 * @param {Array<Array<string>>} data - 要导出的二维数组
 * @param {string} filename - 导出的CSV文件名
 */
const exportToCSV = (data, filename) => {
    // 转换数组中的每一行数据为CSV格式
    const csvContent = data.map(row => 
        row.map(item => {
            // 处理包含逗号、回车或双引号的内容
            if (item.includes(',') || item.includes('\n') || item.includes('"')) {
                // 将双引号替换为两个双引号，并包裹在双引号内
                item = `"${item.replace(/"/g, '""')}"`;
            }
            return item;
        }).join(',')
    ).join('\n');

    // 确保使用UTF-8 BOM防止中文乱码
    const bom = '\uFEFF';
    const csvData = bom + csvContent;

    // 创建一个Blob对象并指定MIME类型为text/csv
    const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });

    // 创建一个下载链接
    const link = document.createElement('a');
    if (link.download !== undefined) {
        // 设置下载文件名
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.style.visibility = 'hidden';
        
        // 触发下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
};

// 导出函数以便其他文件使用 
module.exports = exportToCSV;

使用示例：

const exportToCSV = require('./exportToCSV');

const data = [
    ['姓名', '年龄', '地址'],
    ['张三', '25', '北京\n中国'],
    ['李四', '30', '上海,中国'],
    ['王五', '35', '广州"中国"']
];

exportToCSV(data, 'output.csv');

拓展知识：在data:text/csv;charset=utf-8,\uFEFF中，\uFEFF是一个特殊的Unicode字符，称为“零宽度无间断空格”（Zero Width No-Break Space,ZWNBSP）。在CSV文件的开头放置\uFEFF字符，主要是为了标记文件的字节顺序（Byte Order Mark, BOM），指示其采用UTF-8编码，帮助某些文字处理器或应用程序正确识别文件的编码方式，尤其是那些可能不默认使用UTF-8编码的程序。

这里面会有一些弊端，比如我要导出的内容包含回车等字符，这就导致用excel打开的时候，内容会把行高撑得很高，在屏幕上显示不了两行内容，但在纯CSV文件中，无法直接设置行高或格式化样式，因为CSV文件是一种纯文本格式，不支持这些样式属性。这时候就要考虑另一种导出方式了。

image.png

2、导出Excel文件

首先咱们要在项目中引入SheetJS库。我这项目是webpack打包的，所以我通过npm安装

npm install xlsx

纯网页应用可以通过CDN引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>

接下来就是根据需求写代码，我这里不仅添加了行高的设置，还对每一列做了宽度的设置，如果没有这个参数，默认列宽为30个字符，

示例代码：

import XLSX from 'xlsx'

/**
 * 将二维数组导出为Excel文件并下载
 * @param {Array<Array<string>>} data - 要导出的二维数组
 * @param {string} filename - 导出的Excel文件名
 * @param {Array<number>} [colWidths] - 每列的宽度（以字符数为单位）
 */
export const exportToExcel = (data, filename = 'download.xlsx', colWidths = []) => {
  // 创建一个新的工作簿
  const wb = utils.book_new();
  
  // 将二维数组数据转换为工作表
  const ws = utils.aoa_to_sheet(data);

  // 获取工作表的范围（包括所有单元格）
  const range = utils.decode_range(ws['!ref']);
  
  // 遍历所有单元格，设置单元格样式
  for (let R = range.s.r; R <= range.e.r; ++R) {
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const cellAddress = { c: C, r: R };  // 单元格地址
      const cellRef = utils.encode_cell(cellAddress);  // 单元格引用
      if (!ws[cellRef]) continue;  // 如果单元格不存在，跳过

      // 设置单元格样式
      ws[cellRef].s = {
        alignment: {
          wrapText: true, // 自动换行
          vertical: 'center', // 垂直居中
          horizontal: 'center' // 水平居中
        }
      };
    }
  }

  // 设置行高
  ws['!rows'] = [];  // 初始化行高数组
  for (let R = range.s.r; R <= range.e.r; ++R) {
    ws['!rows'][R] = { hpx: 24 };  // 设置每行高度为24像素
  }

  // 设置列宽
  const defaultColWidth = 30;  // 默认列宽
  const numberOfColumns = range.e.c - range.s.c + 1;  // 计算总列数
  // 如果提供了列宽数组，使用提供的宽度，否则使用默认宽度
  ws['!cols'] = colWidths.length > 0 ? colWidths.map((width) => ({ wch: width })) : Array(numberOfColumns).fill({ wch: defaultColWidth });

  // 将工作表添加到工作簿中
  utils.book_append_sheet(wb, ws, 'Sheet1');

  // 生成Excel文件并触发下载
  writeFile(wb, filename);
};

export default exportToExcel;

问题

在使用webpack打包的时候，尽管在Webpack配置中使用了webpack.ProvidePlugin来提供process模块，但仍然出现Module not found: Error: Can't resolve 'process/browser' 错误，SheetJS尝试引用process模块，但是在浏览器环境中默认情况下没有提供这个模块。

image.png

这该怎么办呢？

1、安装需要的所有依赖，确保SheetJS需要的依赖都存在

npm install process stream-browserify crypto-browserify path-browserify os-browserify buffer

2、修改webpack的配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.mjs$/,
        resolve: {
          // 在解析模块路径时，允许导入不带扩展名的模块。
          // 在严格的 ES 模块规范中，导入时必须提供完整的路径和扩展名。设置 `fullySpecified: false` 可以放宽这个限制，允许省略扩展名。
          fullySpecified: false 
        },
        include: /node_modules/,
        // Webpack 中的 `javascript/auto` 类型允许文件使用混合的 CommonJS 和 ES 模块语法。
        // 这样可以更好地兼容一些使用 `.mjs` 扩展名但并不完全符合 ES 模块规范的第三方库。
        type: 'javascript/auto'
      }
    ]
  },
  resolve: {
    fallback: {
      "process": require.resolve('process/browser'),
      "stream": require.resolve("stream-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "path": require.resolve("path-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "fs": false
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
}

上面的规则块的目的是为了处理 node_modules 中的 .mjs 文件，使其能在 Webpack 中正确解析和打包。这对一些使用 ES 模块的第三方库（如 xlsx）特别重要，因为这些库有时会使用 .mjs 扩展名但并不完全符合严格的 ES 模块规范。

最后我添加了这个规则才解决了问题，我太难了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1830722.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【单片机】DS2431芯片，读写128个字节，程序

【单片机】DS2431芯片，读写128个字节，程序

ds2431pt&r stm32读写程序&#xff1a; 部分程序&#xff1a; #include "sys.h" #include "delay.h" #include "usart.h"#include <stdio.h> #include <stdlib.h> #include <string.h>#include "sys.h" #incl…
阅读更多...
使用代理IP常见问题及解答

使用代理IP常见问题及解答

代理IP在互联网数据收集和业务开展中发挥着重要作用&#xff0c;它充当用户客户端和网站服务器之间的“屏障”&#xff0c;可以保护用户的真实IP地址&#xff0c;并允许用户通过不同的IP地址进行操作。然而&#xff0c;在使用代理IP的过程中&#xff0c;用户经常会遇到一些问题…
阅读更多...
车载学习：UDS诊断、ECU刷写、OTA升级、Tbox测试、CANoe实操

车载学习：UDS诊断、ECU刷写、OTA升级、Tbox测试、CANoe实操

每天的直播时间&#xff1a; 周一至周五&#xff1a;20&#xff1a;00-23&#xff1a;00 周六与周日&#xff1a;9&#xff1a;00-12&#xff1a;00&#xff0c;14&#xff1a;00-17&#xff1a;00 TBOX 深圳 涉及过T-BOX测试吗Ota升级涉及的台架环境是什么样的&#xff1f;上…
阅读更多...
全球潮流集结：海外盲盒小程序引领消费新风尚

全球潮流集结：海外盲盒小程序引领消费新风尚

随着全球化的加速和互联网的普及&#xff0c;消费者的购物选择不再局限于本土市场&#xff0c;而是越来越多地关注国际潮流和时尚趋势。在这个背景下&#xff0c;海外盲盒小程序应运而生&#xff0c;以其独特的购物模式和全球化的商品选择&#xff0c;迅速成为引领消费新风尚的…
阅读更多...
Elasticsearch：智能 RAG，获取周围分块（二）

Elasticsearch：智能 RAG，获取周围分块（二）

在之前的文章 “Elasticsearch&#xff1a;智能 RAG&#xff0c;获取周围分块&#xff08;一&#xff09; ” 里&#xff0c;它介绍了如何实现智能 RAG&#xff0c;获取周围分块。在那个文章里有一个 notebook。为了方便在本地部署的开发者能够顺利的运行那里的 notebook。在本…
阅读更多...
522. 最长特殊序列 II（Rust）

522. 最长特殊序列 II（Rust）

题目 给定字符串列表 strs &#xff0c;返回其中 最长的特殊序列 的长度。如果最长特殊序列不存在&#xff0c;返回 -1 。 特殊序列 定义如下&#xff1a;该序列为某字符串 独有的子序列&#xff08;即不能是其他字符串的子序列&#xff09;。 s 的 子序列可以通过删去字符串…
阅读更多...
Linux中nginx.conf如何配置【搬代码】

Linux中nginx.conf如何配置【搬代码】

Nginx 是一个独立的软件。 它是一款高性能的 Web 服务器、反向代理服务器和负载均衡器等&#xff0c;具有强大的功能和广泛的应用场景。它通常需要单独进行安装和配置来发挥其作用。 下载网址&#xff1a;http://nginx.org/en/download.html nginx.conf写法&#xff1a; #配置…
阅读更多...
怎么样为您的步进电机设计选择正确的驱动器

怎么样为您的步进电机设计选择正确的驱动器

步进电机已成为从车辆气候控制到工业剂量泵和剧院舞台照明等应用的动态定位解决方案。更好的性能、更小的尺寸和更低的成本都有助于它们进入主流应用。 正如电机及其应用的发展一样&#xff0c;控制电机所需的驱动电子设备也在不断发展。特别是&#xff0c;汽车设计人员已经实…
阅读更多...
宋仕强论道之华强北假货

宋仕强论道之华强北假货

宋仕强论道之华强北假货&#xff0c;在华强北发展的初期&#xff0c;假货是华强北一大特点&#xff0c;一般分为翻新&#xff08;拆机&#xff09;货、散新货、换标货、虚标货、国产替换货等几种。金航标kinghelm&#xff08;www.kinghelm.com.cn&#xff09;和萨科微slkor&…
阅读更多...
【Docker】解决访问难题：搭建私有的Docker镜像代理

【Docker】解决访问难题：搭建私有的Docker镜像代理

什么是Nexus 3 Nexus 3是由Sonatype公司开发的一款强大的包管理和仓库服务工具&#xff0c;它广泛应用于自动化的构建系统和持续集成/持续部署(CI/CD)流程中。Nexus 3支持多种包格式&#xff0c;包括但不限于Maven、npm、Docker、NuGet等&#xff0c;能够为软件开发中的依赖管…
阅读更多...
【Android】安Android Studio环境搭建注意点

【Android】安Android Studio环境搭建注意点

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
切割游戏介绍

切割游戏介绍

简介 上大学时&#xff0c;在学校实验室里玩过一个貌似使用VC写的小游戏&#xff0c;一个小球在界面上四处游荡&#xff0c;玩家使用鼠标切割背景&#xff0c;将背景切割剩余到一定的百分比后&#xff0c;就胜利了&#xff0c;后边的背景图会全部展示出来。 使用qt的qml技术&a…
阅读更多...
超级底层：10WQPS/PB级海量存储HBase/RocksDB，底层LSM结构是什么？

超级底层：10WQPS/PB级海量存储HBase/RocksDB，底层LSM结构是什么？

一次穿透&#xff1a;10WQPS/PB级海量存储HBase/RocksDB的底层LSM结构 LSM tree 是很多数据库内部的核心数据结构&#xff0c;包括BigTable,ClickHouse、Cassandra, Scylla&#xff0c; RocksDB&#xff0c;HBase。 ClickHouse基于Log-Structured Merge-Tree 结构&#xff08…
阅读更多...
【Mac】CrossOver 24 for Mac（windows 虚拟机）软件介绍及与PD的比较

【Mac】CrossOver 24 for Mac（windows 虚拟机）软件介绍及与PD的比较

软件介绍 Crossover for Mac是一款由CodeWeavers开发的软件&#xff0c;它允许用户在Mac操作系统上运行Windows程序&#xff0c;而无需安装Windows操作系统。 这个工具使用了Wine项目的技术&#xff0c;它通过创建一个虚拟的Windows环境来实现在Mac上运行Windows程序。用户可…
阅读更多...
CoppeliaSim机器人模拟器与Matlab Simulink环境

CoppeliaSim机器人模拟器与Matlab Simulink环境

一、CoppeliaSim机器人模拟器 CoppeliaSim&#xff08;原名V-REP&#xff0c;Virtual Robot Experimentation Platform&#xff09;是一款基于物理引擎的动力学机器人模拟器。它提供了一个集成的开发环境&#xff0c;支持传感器、机械、机器人、环境的系统建模与仿真。Coppeli…
阅读更多...
404错误页面源码，简单实用的html错误页面模板

404错误页面源码，简单实用的html错误页面模板

一款404错误页面源码&#xff0c;简单实用的html错误页面模板&#xff0c;简单大气的页面布局&#xff0c;可以使用到不同的网站中&#xff0c;相信大家一定会喜欢的&#xff0c;快来下载使用吧&#xff01; 源码下载&#xff1a;https://download.csdn.net/download/m0_66047…
阅读更多...
安全漏洞周报（2024.06.10-2024.06.17）

安全漏洞周报（2024.06.10-2024.06.17）

漏洞速览 ■ SolarWinds Serv-U 目录遍历漏洞(CVE-2024-28995) 漏洞详情 1.SolarWinds Serv-U 目录遍历漏洞(CVE-2024-28995) 影响组件&#xff1a; SolarWinds 是一家提供广泛的 IT 管理和网络管理软件解决方案的公司。SolarWinds 的产品被设计用于监控和管理网络设备、服…
阅读更多...
串扰（一）

串扰（一）

一、说明 串扰应该算比较常见的信号完整性问题了&#xff0c;一般是指由于走线较近&#xff0c;传输信号时在临线上产生耦合噪声的现象。串扰的原因是由于电场和磁场的耦合&#xff0c;我们经常用耦合电容和耦合电感模型进行问题分析。 本文是基于被攻击线阻抗匹配的情形下计…
阅读更多...
SpringBoot+Vue小区物业管理系统 附带详细运行指导视频

SpringBoot+Vue小区物业管理系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码1.用户登录代码2.查询小区信息代码3.保存缴费信息代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootVue框架开发的小区物业管理系统。首先&#xf…
阅读更多...
安全生产管理系统——特殊作业管控

安全生产管理系统——特殊作业管控

特殊作业环节面临事故多发、频发、死亡率高&#xff0c;如何做到有效管理是一大考验&#xff0c;进行系统全面的规整很有必要。安全生产管理系统中特殊作业管理通过整合资源和采用信息化技术对动火、受限空间、盲板抽堵、高处、吊装、临时用电、动土、断路等特殊作业全过程管理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023