web-dev-qa-db-ja.com

Javascript：大きなテキスト/ csvファイルをエクスポートすると、GoogleがクラッシュするChrome

クライアント側でCSVファイルをエクスポートするための次のJavascriptコードがあります。ただし、Google Chromeは、大きな配列をエクスポートしようとするたびにクラッシュします。Chromeで許可されるデータ文字列の制限は何ですか？Chromeで許可されるメモリ制限に達する可能性はありますか？データ文字列がChromeにとって長すぎる場合、クライアント側で大きなCSVファイルをエクスポートするにはどうすればよいですか？

var csvRows = [...]; //Array with 40000 items, each item is 100 characters long.

var csvString = csvRows.join("\r\n");

var a = document.createElement('a');

a.href        = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
a.target      = '_blank';
a.download    = 'export.csv';

document.body.appendChild(a);
a.click();

（予想されるファイルサイズは約6.4MBです）

javascriptcsvexport
34
Ben Wong

同じ問題があり、 Blob を使用して解決しました。

例えば：

csvData = new Blob([csvString], { type: 'text/csv' }); 
var csvUrl = URL.createObjectURL(csvData);
a.href =  csvUrl;

ソース： https://stackoverflow.com/a/24611096/3048937

57
jan

次の機能を使用してCSVをダウンロードしました。 IE/Firefox/Chromeで働いていた

function downloadFile(data, fileName) {
        var csvData = data;
        var blob = new Blob([ csvData ], {
            type : "application/csv;charset=utf-8;"
        });

        if (window.navigator.msSaveBlob) {
            // FOR IE BROWSER
            navigator.msSaveBlob(blob, fileName);
        } else {
            // FOR OTHER BROWSERS
            var link = document.createElement("a");
            var csvUrl = URL.createObjectURL(blob);
            link.href = csvUrl;
            link.style = "visibility:hidden";
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
}
5
Ganesh