Windows系统下载CSV文件日文乱码问题及相关代码咨询
解决Windows下日文CSV下载乱码问题
我来帮你搞定这个Windows环境下下载日文CSV乱码的问题~你已经尝试在ng-csv按钮里设置了charset="shift_jis"和add-bom="true",但还是遇到乱码,下面给你分析几个可能的原因和对应的解决办法:
1. 调整编码+BOM的组合(最常见的解决思路)
Windows里的Excel打开CSV时,编码识别逻辑有点“挑剔”:
- 带BOM的UTF-8格式,Excel能直接正确识别
- Shift-JIS格式本身不需要加BOM,强行加了反而可能导致识别错误
你可以试试两种调整方向:
方案A:改用UTF-8带BOM格式
把按钮的charset改成utf-8,保留add-bom="true",这样生成的CSV是UTF-8带BOM,Excel打开日文不会乱码:
<button class="btn btn-raised btn-inverse btn-sm" charset="utf-8" add-bom="true" ng-csv="getSampleData" csv-header="['コード','勘定科目名','Main_code']" filename="{{ samplefilename }}.csv" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"> <span translate> load.common.sample </span> </button>
方案B:用Shift-JIS但移除BOM
如果业务要求必须用Shift-JIS编码,那就去掉add-bom="true"参数(Shift-JIS没有标准BOM,加了反而会干扰识别):
<button class="btn btn-raised btn-inverse btn-sm" charset="shift_jis" ng-csv="getSampleData" csv-header="['コード','勘定科目名','Main_code']" filename="{{ samplefilename }}.csv" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"> <span translate> load.common.sample </span> </button>
另外要确保你的getSampleData里的日文内容本身是正常的Unicode字符串,这样ng-csv才能正确转成Shift-JIS编码。
2. 检查ng-csv版本是否支持这些参数
有些早期版本的ng-csv可能不支持charset和add-bom参数,你可以确认一下自己用的是angular-csv-ext(扩展版,支持这些参数)还是官方原版ng-csv。如果是原版,可能需要升级到扩展版,或者用下面的自定义方案。
3. 手动生成CSV(最可控的方案)
如果上面的参数调整都没用,那就自己在控制器里写逻辑生成CSV,完全掌控编码和BOM的处理:
$scope.downloadSampleCSV = function() { // 获取要导出的数据 var data = $scope.getSampleData(); var headers = ['コード','勘定科目名','Main_code']; // 拼接CSV内容(注意处理字段里的分隔符,这里简化处理,实际可以加引号包裹) var csvContent = headers.join($scope.separator) + '\n'; data.forEach(function(row) { var rowStr = Object.values(row).join($scope.separator); csvContent += rowStr + '\n'; }); // 处理编码和BOM,这里以UTF-8带BOM为例 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); // UTF-8 BOM var stringBlob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' }); var blob = new Blob([bom, stringBlob], { type: 'text/csv;charset=utf-8' }); // 触发下载 var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = $scope.samplefilename + '.csv'; a.click(); URL.revokeObjectURL(url); };
然后把按钮改成调用这个自定义函数:
<button class="btn btn-raised btn-inverse btn-sm" ng-click="downloadSampleCSV()"> <span translate> load.common.sample </span> </button>
这种方式完全自己控制生成过程,基本不会出现编码问题。
4. 验证下载后的文件编码
下载文件后,用Notepad++这类编辑器打开,查看文件的编码:
- 如果是UTF-8带BOM,编辑器会显示“UTF-8-BOM”
- 如果是Shift-JIS,显示“Shift-JIS”
要是编码不对,说明ng-csv没正确应用参数,那还是用自定义生成的方案更靠谱。
内容的提问来源于stack exchange,提问作者Mayur Sarang




