纯前端操作，JavaScript导出数据为excel文件（前端实现导出excel）

最近在做一些小型的前端开发，遇到一个小需求。我希望能够将数据导出到Excel 文件并将其封装到一个函数中来完成此任务。该函数需要一个二维数组作为参数，数组的第一行是标题。我需要避免在导出过程中出现乱码。此外，考虑到数组中可能包含回车、逗号、换行等特殊字符，我们该如何处理这些情况呢？

解决方案

1、导出CSV文件

将二维数组导出到CSV 文件相对容易。这里我们将使用纯JavaScript 在浏览器中导出CSV 文件，而不直接依赖任何外部库。

将二维数组中的每一行数据转换为CSV 格式，但一定要添加UTF-8 BOM（字节顺序标记），以便正确处理特殊字符（例如回车符、逗号和表情符号）。验证生成的CSV 文件是否正在处理。不会出现中文乱码的情况。创建Blob 对象并将CSV 数据转换为MIME 类型为text/csv;charset=utf-8; 的BLOB。创建一个隐藏的a标签，将href设置为Blob对象的URL，并将download属性设置为导出的文件名。模拟点击链接触发下载，然后删除该链接。

示例代码：

登录后复制

/**

* 将二维数组导出并下载到CSV 文件

* @param {ArrayArraystring} data – 要导出的二维数组

* @param {string} filename – 导出的CSV 文件名

*/

const exportToCSV=(数据， 文件名)={

//将数组中每一行的数据转换为CSV格式

const csvContent=data.map(行=

行.map(项目={

//处理包含逗号、回车或双引号的内容

if (item.includes(\’,\’) || item.includes(\’\\n\’) || item.includes(\’\’\’)) {

//将双引号替换为两个双引号，并用双引号括起来。

item=`\’${item.replace(/\’/g, \’\’\’\’)}\’\’;

}

退回的物品；

}）。参加（\’，\’）

).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 !==未定义) {

//设置下载文件名

link.href=URL.createObjectURL(blob);

link.download=文件名；

link.style.visibility=\’隐藏\’;

//触发下载

document.body.appendChild(链接);

链接.click();

document.body.removeChild(链接);

}

};

//导出函数以在其他文件中使用

module.exports=exportToCSV;

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.

使用示例：

登录后复制

const exportToCSV=require(\’./exportToCSV\’);

常数数据=[

[\’姓名\’, \’年龄\’, \’地址\’],

[\’张三\’, \’25\’, \’北京\\n中国\’],

[\’李四\’, \’30\’, \’中国上海\’],

[“王五”、“35”、“中国广州”]

];

exportToCSV(数据， \’输出.csv\’);

1.2.3.4.5.6.7.8.9.10。

扩展您的知识：data:text/csv;charset=utf-8,\\uFEFF 其中\\uFEFF 是一个特殊的Unicode 字符，称为“零宽度换行符空格，ZWNBSP”。将\\uFEFF 字符放在CSV 文件开头的目的主要是为了标记文件的字节顺序（byte order mark，BOM），以便某些文字处理器和应用程序能够正确识别UTF-8 中的编码方式这表明您正在使用编码。不使用文件UTF-8 编码的程序，尤其是默认情况下。

这里有一些缺点。例如，您要导出的内容包含换行符等字符，那么当您在Excel中打开该内容时，行高太高，以至于无法在屏幕上显示两行内容。但是，纯CSV 不允许您直接在文件中设置行高或格式样式，因为CSV 文件是纯文本格式，不支持这些样式属性。现在，我们将考虑另一种导出方法。

2、导出Excel文件

首先，您需要将SheetJS 库引入到您的项目中。我的项目是用webpack打包的，所以我是通过npm安装的

登录后复制

npm 安装xlsx

1.

纯Web应用可以通过CDN部署

登录后复制

脚本src=\’https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js\’/script

1.

下一步是根据需要添加行高设置，以及设置每列的宽度。如果不使用此参数，则默认列宽为30 个字符。

示例代码：

登录后复制

从“xlsx”导入XLSX

/**

* 导出并下载二维数组到Excel文件

* @param {ArrayArraystring} data – 要导出的二维数组

* @param {string} filename – 导出的Excel文件名

* @param {Arraynumber} [colWidths] – 每列的宽度（以字符为单位）

*/

导出const exportToExcel=(数据， 文件名=\’download.xlsx\’, colWidths=[])={

//创建一个新工作簿

const wb=utils.book_new();

//将二维数组数据转换为工作表

const ws=utils.aoa_to_sheet(数据);

//获取工作表范围（包括所有单元格）

const range=utils.decode_range(ws[\’!ref\’]);

//遍历所有单元格并设置单元格样式

for (让R=range.s.r; R=range.e.r; ++R) {

for (让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[单元格引用].s={

对齐方式： {

WrapText: true, //自动换行

Vertical: \’center\’, //垂直居中

Horizontal: \’center\’ //水平居中

}

};

}

}

//设置行高

ws[\’!rows\’]=[] //初始化行高数组。

for (让R=range.s.r; R=range.e.r; ++R) {

ws[\’!rows\’][R]={ hpx: 24 } //设置每行的高度为24 像素

}

//设置列宽

constdefaultColWidth=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, 文件名);

};

导出默认exportToExcel。

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.4 4.45.46.47.48.49.50 51.52.53.54.55.56。

问题

使用Webpack进行打包时，webpack配置使用webpack.ProvidePlugin提供进程模块，但我收到错误“找不到模块：错误：\’进程/浏览器\’无法解析”仍然发生。 SheetJS 尝试引用process 模块，但浏览器默认不向环境提供该模块。

你会怎么做？

1. 安装所有必需的依赖项，并确保SheetJS 所需的所有依赖项均存在。

登录后复制

npm安装过程stream-browserify crypto-browserify path-browserify os-browserify buffer

1.

2. 更改Webpack设置

登录后复制

模块. 导出={

模块：{

规则： [

{

test: //.mjs$/,

已解决： {

//允许在解析模块路径时导入不带扩展名的模块。

//ES模块的严格规范要求导入时指定完整路径和扩展名。设置“fullSpecified: false”可以放宽此限制并允许省略扩展名。

完全指定： false

},

include: /node_modules/,

//Webpack 的`javascript/auto` 类型允许您在文件中混合CommonJS 和ES 模块语法。

//这可能会提高与某些使用`.mjs` 扩展名但不完全符合ES 模块规范的第三方库的兼容性。

type: \’javascript/自动\’

}

]

},

已解决： {

后备： {

\’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’: 假

}

},

插件： [

新的webpack.ProvidePlugin({

process: \’进程/浏览器\’,

Buffer: [\’缓冲区\’, \’缓冲区\’]

})

]

}

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34。

上述规则块的目的是处理node_modules内的.mjs文件，以便Webpack能够正确解析和打包它们。对于一些使用ES 模块的第三方库（例如xlsx），这些库可能会使用.mjs 扩展名，但这尤其重要。

最后添加这条规则解决了问题。我过得很艰难。

# 对于上面的纯前端操作，JavaScript导出数据是Excel文件。相关信息请参见官方公告。