I have an issue with downloading a csv file. The method that i try is cause on Safari it opened up a new tab with the headers and it didn't download the file. On windows chrome and firefox downloaded the file the correct way with the headers in it. I am using Svelte.
That was my first try but as i mentioned above on Safari doesn't download the file just opened up a new tab with the headers:
<a
class="button"
href="https://myurl/Blank_CSV_Template.csv"
download>
<Button
color="primary"
icon="file-download"
text="Download Blank CSV template"
/>
</a>
So I tried a new code which works on Safari too but when i open up the file there are undefined in the first column. (It is the same on windows too.)
What shall i do? I ran out of ideas. Thanks for your help.
<span class="button" on:click={() => download()}>
<Button
color="primary"
icon="file-download"
text="Download user info in CSV file"
/>
</span>
const download = () => {
fetch(
"https://myurl/Blank_CSV_Template.csv",
{
method: "GET",
mode: "no-cors",
responseType: "blob",
headers: {
//"content-type": "text/csv;charset=UTF-8",
"Content-Disposition": "attachment;filename=Blank_CSV_Template.csv",
"Content-Type": "text/csv;charset=UTF-8", // or Content-type: "application/vnd.ms-excel"
},
}
)
.then((response) => {
console.log(new Blob([response.data]));
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "Blank_CSV_Template.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch((error) => console.error(error.message));
};