javascript - Saving CSV file using blob in Safari - Stack Overflow

admin管理员组

文章数量:1277398

I have codes below to generate the download link so that users could download the .csv file on my site.

var link = document.createElement("a");
link.id = "csvDwnLink";
window.URL = window.URL || window.webkitURL;

var csv = "\ufeff" + CSV,
    blob = new window.Blob([csv], {type: 'text/csv, charset=UTF-8'}),
    csvUrl = window.URL.createObjectURL(blob),
    filename = 'export.csv';

$("#csvDwnLink").attr({'download': filename, 'href': csvUrl});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);

I hope the user could click the download link with csvUrl to download the cvs file.
It works on chrome. However, when I click the same link using Safari, it will directly show me the content of the csv file in the tab.

How do I solve this problem so that the safari will show the saving file window which user could select the path where they want to save the file instead of showing the content of the cvs file directly when I click the download link?
Hope someone could me some remendations or alternative methods.
Thanks in advance!

== Updated ==
Find out solutions here
solution 1, solution 2

The code will be:

var link = document.createElement("a");
link.id = "csvDwnLink";

document.body.appendChild(link);
window.URL = window.URL || window.webkitURL;
var csv = "\ufeff" + CSV,
    csvData = 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(csv),
    filename = 'filename.csv';
$("#csvDwnLink").attr({'download': filename, 'href': csvData});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);

Safari will download the file for the user, however, the file name will be unknown, probably it's because Safari don't support 'download' attribute yet as raphael mentioned.

I have codes below to generate the download link so that users could download the .csv file on my site.

var link = document.createElement("a");
link.id = "csvDwnLink";
window.URL = window.URL || window.webkitURL;

var csv = "\ufeff" + CSV,
    blob = new window.Blob([csv], {type: 'text/csv, charset=UTF-8'}),
    csvUrl = window.URL.createObjectURL(blob),
    filename = 'export.csv';

$("#csvDwnLink").attr({'download': filename, 'href': csvUrl});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);

I hope the user could click the download link with csvUrl to download the cvs file.
It works on chrome. However, when I click the same link using Safari, it will directly show me the content of the csv file in the tab.

How do I solve this problem so that the safari will show the saving file window which user could select the path where they want to save the file instead of showing the content of the cvs file directly when I click the download link?
Hope someone could me some remendations or alternative methods.
Thanks in advance!

== Updated ==
Find out solutions here
solution 1, solution 2

The code will be:

var link = document.createElement("a");
link.id = "csvDwnLink";

document.body.appendChild(link);
window.URL = window.URL || window.webkitURL;
var csv = "\ufeff" + CSV,
    csvData = 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(csv),
    filename = 'filename.csv';
$("#csvDwnLink").attr({'download': filename, 'href': csvData});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);

Safari will download the file for the user, however, the file name will be unknown, probably it's because Safari don't support 'download' attribute yet as raphael mentioned.

• javascript
• jquery
• csv
• safari

Share Improve this question Follow edited May 23, 2017 at 12:19 CommunityBot 111 silver badge asked Apr 22, 2015 at 13:51 Calvin JengCalvin Jeng 5711 gold badge11 silver badge77 bronze badges 3

• How does the HTML look (especially the link that gets csvUrl as href)? – Raphael Müller Commented Apr 22, 2015 at 14:17
• Thanks for your reply. I have updated the code snippet. I create the link element in JS and set the attribute including csvUrl to that download link directly. – Calvin Jeng Commented Apr 22, 2015 at 14:22
• 1 I created a JSFiddle for your question: jsfiddle/628mmkww/2 - it looks like Safari does not support what you need. – Raphael Müller Commented Apr 22, 2015 at 14:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I did a quick research - I looks like Safari does not support what you are trying to achieve.

The reason why your solution works in Chrome (and Firefox) is that they support the download attribute - Safari doesn't yet.

Safari 10.1+ supports "download" attribute. It should work now.

https://github./eligrey/FileSaver.js/issues/129#issuement-275221240

本文标签： javascriptSaving CSV file using blob in SafariStack Overflow