Angular save file as csv导致失败 - 网络错误仅限Chrome

时间:2016-09-07 15:39:46

标签: javascript angularjs google-chrome csv

我使用以下代码将文件另存为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上使用而不是我的函数吗?

2 个答案:

答案 0 :(得分:29)

我终于使用了这个,希望它可以帮助下一个遇到这个问题:

 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);
            }

答案 1 :(得分:1)

我也遇到类似的问题,但是必须提供一个以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。