Javascript 到 csv 导出编码问题

问题描述 投票:0回答:11

我需要将 javascript 数组导出到 Excel 文件并下载它,我正在这段代码中执行此操作。 data 是一个 JavaScript 对象数组。

var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function(dataMember, index)
{
    dataString = dataMember.join(",");
    csvContent += index < data.length ? dataString+ "\n" : dataString;
}); 

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "upload_data" + (new Date()).getTime() + ".csv");
link.click();

所有这些东西都工作正常,直到我有包含非英语字符的字符串属性,如西班牙语、阿拉伯语或希伯来语。如何导出所有这些非 ASCII 值?

javascript csv export-to-csv
11个回答
134
投票

您应该在文本开头添加 UTF-8 BOM,例如:

var csvContent = "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent);

它对我的 Excel 2013 有用。

演示小提琴


119
投票

您可以先添加BOM,使用此代码尝试

var BOM = "\uFEFF"; 
var csvContent = BOM + csvContent;

然后用数据创建文件头:“text/csv;charset=utf-8”


18
投票

Excel 在检测编码方面确实很糟糕,尤其是 OSX 上的 Excel。

最好的解决方案是使用默认的 Excel 编码对 CSV 进行编码:windows-1252(也称为 ANSI,基本上是 ISO-8859-1 的子集)。

我在以下位置提供了如何执行此操作的完整示例:https://github.com/b4stien/js-csv-encoding

两个主要部分是 stringencoding(在 windows-1252 中对 CSV 的内容进行编码)和 FileSaver.js(用于下载生成的 Blob)。

看起来像:

var csvContent = 'éà; ça; 12\nà@€; çï; 13',
    textEncoder = new TextEncoder('windows-1252');


var csvContentEncoded = textEncoder.encode([csvContent]);
var blob = new Blob([csvContentEncoded], {type: 'text/csv;charset=windows-1252;'});
saveAs(blob, 'some-data.csv');

9
投票

只需将 BOM 字符粘在字符串前面即可。
没有必要使用

encodeURIComponent
方法并粘合数据字符串片段。

const data = 'öäüÖÄÜ';
const BOM = '\uFEFF';
const blob = new Blob([BOM + data], { type: 'text/csv;charset=utf-8' });

const url = window.URL.createObjectURL(blob);
const linkElem = document.createElement('a');
linkElem.href = url;
linkElem.click();

7
投票

选项1

使用

iconv-lite
库并将输出编码为 ascii,然后再将其发送回用户。 示例:

var iconv = require('iconv-lite');
buf = iconv.encode(str, 'win1255'); // return buffer with windows-1255 encoding

选项2

在文件头部写入UTF-8编码的BOM头。 示例:

res.header('Content-type', 'text/csv; charset=utf-8');
res.header('Content-disposition', 'attachment; filename=excel.csv'); 
res.write(Buffer.from('EFBBBF', 'hex')); // BOM header

// rest of your code

选项3

使用base64 url 格式,如

data:text/csv;base64,77u/Zm9vLGJhcg0KYWFhLGJiYg==
。此方法也适用于客户端(IE10+、FF、Chrome、Opera、Safari)。

例如:

window.location = "data:text/csv;base64,77u/" + btoa("foo,bar\r\naaa,bbb");

2
投票

不知何故发现使用 utf-16le 编码和 BOM 的 Tab-Separated-CSV 可在 WIN/MAC Excel 上工作

遵循 b4stien 的答案,但对存档有一点不同:

var csvContent = 'éà; ça; 12\nà@€; çï; 13',
    textEncoder = new TextEncoder('utf-16le');
var csvContentEncoded = textEncoder.encode([csvContent]);
var bom = new Uint8Array([0xFF, 0xFE]);
var out = new Uint8Array( bom.byteLength + csvContentEncoded.byteLength );
out.set( bom , 0 );
out.set( csvContentEncoded, bom.byteLength );
var blob = new Blob([out]);
saveAs(blob, 'some-data.csv');

Linux /usr/bin/file 测试:

Little-endian UTF-16 Unicode text, with very long lines, with CRLF line terminators

2
投票
 data=`"red","मुकेश"`
 var processdata = "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURIComponent(data);

1
投票

我已经能够在https://stackoverflow.com/a/27975629/5228251answer

的帮助下解决我的问题
const json2csv = require('json2csv');
const csvExport = (req, res) => {
    var csvContent = json2csv({ data, fields })

    res.setHeader('Content-Type', 'text/csv')
    // just prepend the '\ufeff' to your csv string value
    return res.status(200).send('\ufeff' + csvContent)
}

0
投票

B4stien,谢谢您的回答! 在测试了几种基于字符集“utf8”的解决方案后,编码 windows-1252 是唯一能让我在 Excel 365 中保留口音的解决方案!

Manetsus,b4stien的答案和他的链接对我的情况非常有用:我必须将法语和德语数据导出到csv文件中:没有基于“utf8”的解决方案有效......只有他的解决方案使用“ANSI”(窗口-1252)编码器...

我给出了他的代码示例,你可以从链接下载依赖的encoding-indexes.js、encoding.js和FileSaver.js...

    <!doctype html>
    <html>

    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="encoding-indexes.js"></script>
        <script type="text/javascript" src="encoding.js"></script>
        <script type="text/javascript" src="FileSaver.js"></script>
    </head>

    <body>
        <a href="#" id="download-csv">Click me to download a valid CSV !</a>

        <script type="text/javascript">
            var csvContent = 'éà; ça; 12\nà@€; çï; 13',
                textEncoder = new CustomTextEncoder('windows-1252', {NONSTANDARD_allowLegacyEncoding: true}),
                fileName = 'some-data.csv';

            var a = document.getElementById('download-csv');
            a.addEventListener('click', function(e) {
                var csvContentEncoded = textEncoder.encode([csvContent]);
                var blob = new Blob([csvContentEncoded], {type: 'text/csv;charset=windows-1252;'});
                saveAs(blob, fileName);
                e.preventDefault();
            });
        </script>
    </body>

    </html>

尽管如此,由于Excel在语言和格式的支持上相对开放,所以我不排除因为安装方式的原因,我的开发环境不支持UTF8……

注意:我在 Windows 7 上使用 Firefox、Chrome 和 IE 11 以及 Excel 365 进行了测试...


0
投票

要导出包含多字节字符的 CSV 并使其在多个操作系统平台(Windows、Linux、MacOS)中的文本编辑器和 Excel 上可读,应应用以下规则:

  1. 用制表符而不是逗号分隔字段(以便 MacOS 上的 Excel 可以正确显示生成的 CSV 文件)
  2. 使用 UTF-16 小端 (UTF16-LE) 而不是 UTF-8 对字符串/内容进行编码
  3. 在序列化流的开头添加 RFC2781 第 3.2 节中指定的字节顺序标记 (BOM) 0xFEFF,以显式提供使用 UTF16-LE 编码的内容的“签名”

NodeJS 的进一步阐述、用例和示例代码可以在这篇文章中看到。


0
投票

这是对我有用的解决方案

参考:导出编码的 CSV 文件

var csv = 'السلام عليكم, Student name\n';
        
var hiddenElement = document.createElement('a');
        //workaround to support encoding
hiddenElement.href = **'data:text/csv;charset=utf-8,%EF%BB%BF'+encodeURIComponent(csv);**

hiddenElement.download = 'Course Students Progress - ' + new Date().toLocaleString() + '.csv';
hiddenElement.click();
© www.soinside.com 2019 - 2024. All rights reserved.