js-file-download icon indicating copy to clipboard operation
js-file-download copied to clipboard

export CSV encoding utf-8 issue

Open phamxuanphuc opened this issue 5 years ago • 11 comments

I did it but 'ı,ü,ö,ğ,ş' this characters looks like 'ı ü ö ÄŸ ÅŸ' in the CSV file. Can anyone solve this problem?

phamxuanphuc avatar Jan 30 '20 09:01 phamxuanphuc

I have the same problem, but in my case, it is caused by the CSV reader (LibreOffice) choosing a wrong charset to open the file. I can open the downloaded file without the issue in a text editor (like Notepad).

To help the reader detect the correct charset, I included a BOM at the beginning, as it showed here.

fileDownload("\uFEFF" + outputContent, 'myFile.csv', 'text/csv');

SouzaJBR avatar Jun 01 '20 21:06 SouzaJBR

I'm having same problem, SouzaJBR 's answer is not working for me unfortunately..

littlehome-eugene avatar Aug 31 '20 06:08 littlehome-eugene

@littlehome-eugene, sorry to hear that. Could you post some code that reproduces your issue?

kindrowboat avatar Aug 31 '20 12:08 kindrowboat

     dispatch(downloadSearchDeliveryGroup(params)).then((response) => {
       let filename =
         response.headers['content-disposition'].split('filename=')[1] ||
         'order.csv'
       // var bom = new Uint8Array([0xef, 0xbb, 0xbf])
       var mime = 'text/csv; charset=utf-8'
       FileDownload('\uFEFF' + response.data.toString(), filename, mime)
     })

I tried the above version, and the with bom version as well..

littlehome-eugene avatar Aug 31 '20 15:08 littlehome-eugene

Thanks for getting back so promptly. Could you also please provide a sample CSV file that reproduces the issue? Lastly, could you let me know what browser you're using, and what program you're using to open the CSV file?

kindrowboat avatar Aug 31 '20 15:08 kindrowboat

I used chrome

I used microsoft excel (not sure which version, but I was on windows 10, the computer was bought less than 6 month, so fairly new version of office I guess)

attaching the sample file as well.

order-1.csv.zip

littlehome-eugene avatar Sep 01 '20 13:09 littlehome-eugene

I was not able reproducing the issue. I made this codesandbox that replicates fetching the CSV through an AJAX request, and was able to download the CSV and load it into Excel 365.

Steps

  1. downloaded and unzipped your sample CSV
  2. loaded it in Excel successfully
  3. removed the BOM
  4. confirmed that Excel could no longer load the CSV (had gibberish output)
  5. made code sandbox:
    1. added the CSV without the BOM
    2. made front-end that makes a fetch API request to get the CSV
    3. save/download the file using fileDownload(blob, "out.csv", "text/csv;charset=utf-8", "\uFEFF")
  6. downloaded CSV through code sandbox output page
  7. loaded output CSV into Excel successfully

Could you try using the sandbox to download the CSV and see if it loads in your copy of Excel? Note: you can't use the IDE's built in web-browser due to permissions issues. You'll have to open the app URL in it's own tab/window.

kindrowboat avatar Sep 02 '20 03:09 kindrowboat

@littlehome-eugene did you have a chance to look into this more?

kindrowboat avatar Sep 15 '20 17:09 kindrowboat

@motevets

We couldn't fix it using js-file-download

      const bom = "\uFEFF"
      var csvString = response.data;
      var a = window.document.createElement('a');
      a.setAttribute('href', 'data:text/csv; charset=utf-8,'+bom + encodeURIComponent(bom+csvString));
      a.setAttribute('download', 'order.csv');
      window.document.body.appendChild(a);
      a.click();

is what we are using now.

littlehome-eugene avatar Sep 21 '20 11:09 littlehome-eugene

Oh I thought you wanted my solution..

ok i'll try what you suggested..

littlehome-eugene avatar Sep 21 '20 11:09 littlehome-eugene

I changed above line to FileDownload(response.data, 'out.csv', 'text/csv;charset=utf-8', '\uFEFF')

and the file is not readable.. I didn't try this in your sandbox(?) I tried it on our test server

littlehome-eugene avatar Sep 22 '20 01:09 littlehome-eugene