Angular 将文件保存为 csv 导致网络错误仅在 Chrome 上

Posted 2023-02-22

【中文标题】Angular 将文件保存为 csv 导致网络错误仅在 Chrome 上

【英文标题】：Angular save file as csv result in Failed- network error Only on Chrome

【发布时间】：2017-01-15 09:30:09

【问题描述】：

我正在使用以下代码将文件保存为 csv。

$scope.saveCSVFile = function (result)

    var a         = document.createElement('a');
    a.href = 'data:application/csv;charset=utf-8,' + encodeURIComponent(result.data);
    a.target      = '_blank';
    a.download    =  $scope.getFileNameFromHttpResponse(result);
    document.body.appendChild(a);
    a.click();
    $scope.isReportInProgress = false;
;

该文件在大多数情况下都可以正常工作，但由于某种原因，当文件大于 10MB 时，我会收到“失败 - 网络错误”。

它只发生在 chrome 上。

我尝试在网上搜索此问题，但找不到任何相关内容。

你能想出为什么会发生这种情况吗？或者可能使用其他适用于 chrome/firefox/IE 而不是我的函数的保存文件方法？

【参考方案1】：

终于用这个了，希望能帮助下一个遇到这个问题的人：

 var blob = new Blob([result.data], type: 'text/csv');
            var filename =  $scope.getFileNameFromHttpResponse(result);
            if(window.navigator.msSaveOrOpenBlob) 
                window.navigator.msSaveBlob(blob, filename);
            
            else
                var elem = window.document.createElement('a');
                elem.href = window.URL.createObjectURL(blob);
                elem.download = filename;
                document.body.appendChild(elem);
                elem.click();
                document.body.removeChild(elem);
            

【讨论】：

FileSaver 在其他方面是保存 blob 客户端的好选择。它照顾浏览器差异

这救了我！我怀疑我需要使用 blob API，但不确定错误是否相关。非常感谢

工作得很好，tyvm

拯救了我的一天！谢谢;-)

不要忘记 URL.revokeObjectURL() 否则 blob 将不会被垃圾回收。

【参考方案2】：

我遇到了类似的问题，但必须提供从服务器以 base64 格式发送的 zip 文件。对我有什么诀窍：

function downloadBlob(data, filename) 
    const blob = new Blob([new Buffer(data, 'base64')], type: 'application/octet-stream');

    if (window.navigator.msSaveOrOpenBlob) 
        window.navigator.msSaveBlob(blob, filename);
     else 
        const elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;
        document.body.appendChild(elem);
        elem.click();
        window.URL.revokeObjectURL(elem.href);
        document.body.removeChild(elem);
            


return (
  /* ... */
  <a href="#" onClick=() => downloadBlob(report.zip, `$report.filename.zip`)>
      Download <b>report.filename.zip</b>
  </a>
  /* ... */
);

我离开了这个函数，因为它在提供文件后撤销了 URL。