最近在做一些小型的前端开发，遇到一个小需求。我希望能够将数据导出到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文件。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/93275.html
