私は次の方法でデータURIを使用してファイルをダウンロードしようとしています:
<input type="button"
onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
value="Download"/>
問題は、ダウンロードしたファイルの名前が常に「Unknown」であるということです。これはファイルに名前を付ける正しい方法ですか?または何か他のことをする必要がありますか?
ソリューションは次のとおりです。目的の名前のdownload
属性をアンカータグa
に追加するだけです
<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
download="somedata.csv">Example</a>
別の解決策は、JQuery/Javascriptを使用することです
Safariでは、これを使用して、ファイルを⌘-Sするようにユーザーに指示できます。
window.open('data:text/csv;base64,' + encodeURI($window.btoa(content)));
それ以外の場合、これは Filesaver.js を使用しますが、正常に動作します:
var downloadFile = function downloadFile(content, filename) {
var supportsDownloadAttribute = 'download' in document.createElement('a');
if(supportsDownloadAttribute) {
var link = angular.element('<a/>');
link.attr({
href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),
target: '_blank',
download: filename
})[0].click();
$timeout(function() {
link.remove();
}, 50);
} else if(typeof safari !== 'undefined') {
window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));
} else {
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename);
}
}
注:上記のコードにはいくつかのAngularJSがありますが、因数分解しやすいはずです...
Angularjsやバックボーンなどの他のライブラリを使用している場合は、このようなものを試すことができます。
$( 'a.download')。attr( 'href'、 'data:application/csv; charset = utf-8、' + $ scope.data);
私は同じ問題を抱えていて、サーバー側でCSVファイルを提供しているすべてのブラウザで最終的に解決しました:
const result = json2csv({ data });
res.writeHead(200
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment;filename=issues.csv',
'Content-Length': result.length
});
res.end(result);
Javascriptのみを使用してクライアント側のソリューションを探している人の場合、IE 10以下(およびEdge ...なぜ?!)
var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
var link = document.createElement('a');
link.setAttribute("download", "extract.csv");
link.setAttribute("href", uri);
document.body.appendChild(link);
link.click();
body.removeChild(body.lastChild);