0

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));
  };
  • You have to configure your server to send the content disposition response header. Sending it as a request header doesn't do anything. – Juan Mendes Dec 28 '21 at 18:32

0 Answers0