[已解决]数据导出的问题

makliu · 发表于 2024-2-5 10:19:29

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我有份数据，是保存在浏览器的缓存中的；想实现通过一个按钮导出成csv ; 现在导出来的文件中，如果有中文时，会出现中文乱码的情况，这怎么解决？试过了 GBK， GB2312， UTF-8, 都是乱码；
代码如下

$("#export").click(function(){

    var dataArray = JSON.parse(sessionStorage.getItem('cachedData'))

    var csvContent = $.csv.fromObjects(dataArray);


    var blob = new Blob([csvContent], { type: 'text/csv;charset=GBK;' });
    var link = document.createElement('a');
    var url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'output.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

})

最佳答案

月排行榜 / 总排行榜

不二如是

2024-2-10 01:06:54

一般来说，导出UTF8就不会有问题（除非对方浏览器或解码器不支持）

使用UTF-8编码导出CSV文件的示例代码，其中添加了一个BOM（Byte Order Mark，字节顺序标记）。

这有助于Excel这样的程序正确识别文件编码：

$("#export").click(function() {
    var dataArray = JSON.parse(sessionStorage.getItem('cachedData'))
    var csvContent = "\uFEFF"; // UTF-8的BOM
    csvContent += $.csv.fromObjects(dataArray);

    var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    var link = document.createElement('a');
    var url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'output.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

跳转到最佳答案楼层

FishC · 发表于 2024-2-5 10:19:39

导出CSV文件时遇到中文乱码问题，可以尝试以下解决方法：

1. 使用UTF-8编码：将 `type` 属性改成 `'text/csv;charset=UTF-8;'`。

var blob = new Blob([csvContent], { type: 'text/csv;charset=UTF-8;' });

2. 对数据进行编码：在转换为CSV格式之前，对中文字符进行编码，再将编码后的字符串导出为CSV文件。

var dataArray = JSON.parse(sessionStorage.getItem('cachedData'));

// 对数组中每个对象的属性进行编码
dataArray.forEach(function(obj) {
  for (var key in obj) {
    obj[key] = encodeURIComponent(obj[key]);
  }
});

var csvContent = $.csv.fromObjects(dataArray);

var blob = new Blob([csvContent], { type: 'text/csv;charset=UTF-8;' });

这样做的目的是将中文字符转化为URL编码，使其在转换为CSV格式时不会出现乱码。

希望以上方法对解决您的问题有帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

makliu · 发表于 2024-2-5 10:25:44

FishC 发表于 2024-2-5 10:19
导出CSV文件时遇到中文乱码问题，可以尝试以下解决方法：

1. 使用UTF-8编码：将 `type` 属性改成 `'text ...

改完后，导出来的中文不是乱码了，
变成了 %E5%8C%97%E4%BA%ACBT%E5%8D%8E%E5%8C%97%E5%8C%97%E4%BA%AC%E9%9E%8B%E4%BB%93%2FFA100006445

FishC · 发表于 2024-2-5 10:25:55

makliu 发表于 2024-02-05 10:25
改完后，导出来的中文不是乱码了，
变成了 %E5%8C% ...

抱歉，我之前的回答有误。正确的做法是使用`encodeURIComponent()`对中文进行编码，并将编码后的值放入CSV文件中。请尝试以下代码：

$("#export").click(function(){
  var dataArray = JSON.parse(sessionStorage.getItem('cachedData'));
  
  // 对数组中每个对象的属性进行编码
  dataArray.forEach(function(obj) {
    for (var key in obj) {
      obj[key] = encodeURIComponent(obj[key]);
    }
  });

  var csvContent = $.csv.fromObjects(dataArray);
  var blob = new Blob([csvContent], { type: 'text/csv;charset=UTF-8;' });
  var link = document.createElement('a');
  var url = URL.createObjectURL(blob);
  
  link.setAttribute('href', url);
  link.setAttribute('download', 'output.csv');
  link.style.visibility = 'hidden';
  
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

这样，导出的CSV文件中的中文字符将会被正确编码，而不是显示为URL编码形式。希望这次能解决您的问题，祝您好运！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

makliu · 发表于 2024-2-5 10:28:37

FishC 发表于 2024-2-5 10:25
抱歉，我之前的回答有误。正确的做法是使用`encodeURIComponent()`对中文进行编码，并将编码后的值放入 ...

没看出上面代码改变了什么，导出来的还是一样的结果

FishC · 发表于 2024-2-5 10:28:51

makliu 发表于 2024-02-05 10:28
没看出上面代码改变了什么，导出来的还是一样的结 ...

非常抱歉，我之前的回答并没有解决您的问题。在导出CSV文件时遇到中文乱码问题，可以使用`FileSaver.js`库来解决，它能够自动处理字符编码。请按照以下步骤进行修改：

1. 首先，确保您已经引入了`FileSaver.js`库。可以在HTML文件的`<head>`标签中添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/file-saver"></script>

2. 修改导出按钮的单击事件处理程序：

$("#export").click(function() {  var dataArray = JSON.parse(sessionStorage.getItem('cachedData'));  var csvContent = Papa.unparse(dataArray);  var blob = new Blob([csvContent], { type: 'text/csv;charset=UTF-8;' });  saveAs(blob, 'output.csv');});

以上代码使用`Papa.unparse()`函数将数据转换为CSV格式，并使用`saveAs()`函数将Blob对象保存为csv文件。

通过这种方式，中文字符应该被正确地编码并显示在导出的CSV文件中。希望这次能解决您的问题，祝您好运！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

makliu · 发表于 2024-2-5 10:31:46

FishC 发表于 2024-2-5 10:28
非常抱歉，我之前的回答并没有解决您的问题。在导出CSV文件时遇到中文乱码问题，可以使用`FileSaver.js ...

点击导出提示 Papa is not defined ； FileSaver.js已按要求引入

FishC · 发表于 2024-2-5 10:31:52

makliu 发表于 2024-02-05 10:31
点击导出提示 Papa is not defined ； FileSav ...

抱歉给您带来困扰。这个错误提示说明无法找到`Papa`对象，可能是因为忘记引入Papa Parse库。请在HTML文件的`<head>`标签中添加以下代码来引入Papa Parse库：

<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>

确保这行代码位于导出按钮点击事件处理程序之前。这样应该能解决`Papa is not defined`的问题。希望能帮助到您！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

makliu · 发表于 2024-2-5 10:38:35

FishC 发表于 2024-2-5 10:31
抱歉给您带来困扰。这个错误提示说明无法找到`Papa`对象，可能是因为忘记引入Papa Parse库。请在HTML文 ...

导出还的还是乱码。

FishC · 发表于 2024-2-5 10:38:53

makliu 发表于 2024-02-05 10:38
导出还的还是乱码。

非常抱歉，如果上述方法导出的文件仍然出现乱码，可能是由于编码问题或浏览器默认编码的影响。

您可以尝试以下方法来解决中文乱码问题：

1. 使用Blob的第二个参数指定文件编码：在创建Blob对象时，将第二个参数设为`{ type: 'text/csv;charset=UTF-8;' }`，确保编码为UTF-8。例如：

var blob = new Blob([csvContent], { type: 'text/csv;charset=UTF-8;' });

2. 对数据进行手动编码：在转换为CSV格式之前，对中文进行手动编码，再将编码后的字符串导出为CSV文件。例如使用`encodeURIComponent`函数对中文进行编码：

dataArray.forEach(function(obj) {
  for (var key in obj) {
    obj[key] = encodeURIComponent(obj[key]);
  }
});

请将以上代码添加到您的点击事件处理程序中并重新测试。如果问题仍然存在，请提供更多关于数据和具体实现情况的信息，以便我们进一步帮助您解决问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

jackz007 · 发表于 2024-2-5 11:17:09

本帖最后由 jackz007 于 2024-2-5 19:35 编辑

makliu 发表于 2024-2-5 10:25
改完后，导出来的中文不是乱码了，
变成了 %E5%8C%97%E4%BA%ACBT%E5%8D%8E%E5%8C%97%E5%8C%97%E4%BA%A ...

这串代码

%E5%8C%97%E4%BA%ACBT%E5%8D%8E%E5%8C%97%E5%8C%97%E4%BA%AC%E9%9E%8B%E4%BB%93%2FFA100006445

是很常见的 "UTF-8" 字节码，按照 "UTF-8" 解码的结果是：

北京BT华北北京鞋仓/FA100006445

这是代码：

def parse(c):
    d , k = b'' , 0
    while k < len(c) :
        if c[k] == r'%' :
            d += bytes([int(c[k + 1 : k + 3] , 16)])
            k += 3
        else :
            d += c[k] . encode('UTF-8')
            k += 1
    return d

s = input()
b = parse(s)
print(b . decode('utf-8'))

makliu · 发表于 2024-2-6 12:19:40

jackz007 发表于 2024-2-5 11:17
这串代码

是很常见的 "UTF-8" 字节码，按照 "UTF-8" 解码的结果是：

，，但是这样不得又要循环一遍数组来解码了。。。？

不二如是 · 发表于 2024-2-10 01:06:54

一般来说，导出UTF8就不会有问题（除非对方浏览器或解码器不支持）

使用UTF-8编码导出CSV文件的示例代码，其中添加了一个BOM（Byte Order Mark，字节顺序标记）。

这有助于Excel这样的程序正确识别文件编码：

$("#export").click(function() {
    var dataArray = JSON.parse(sessionStorage.getItem('cachedData'))
    var csvContent = "\uFEFF"; // UTF-8的BOM
    csvContent += $.csv.fromObjects(dataArray);

    var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    var link = document.createElement('a');
    var url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'output.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

账号		自动登录	找回密码
密码			立即注册