Mui-datatables: Problems with the csv file downloaded on Windows.

Created on 14 Aug 2019  路  5Comments  路  Source: gregnb/mui-datatables

The option to download the csv file doesn't work well in Windows 10 with the default browsers.

Current Behavior

The option to download the csv file is working fine in Debian 9 but when i test the same function on Windows 10 the downloaded file doesn't recognize special characters (accent marks) and also when i do it in Microsoft Edge the file is downloaded without an extension.

So, i have some questions about this functionality.

  1. How can i modify the encoding of the csv file with an existent option -included in the package- in order to see the special characters in Windows?
    I tried escaping the special characters but it didn't make any difference.

  2. The download functionality is compatible with the default browsers of Windows?

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.9.2 |
| MUI-datatables | 2.0.0-beta-32 |
| React | 16.8.5 |
| browser | Microsoft Edge 38.14393.1066.0 |

Most helpful comment

I think I figured it out. Add an onDownload method to your options object that looks like this:

  onDownload: (buildHead, buildBody, columns, data) => {
    return "\uFEFF" + buildHead(columns) + buildBody(data);
  }

That'll add the BOM. It can't be added by default because it messes up other spreadsheet programs.

All 5 comments

It may be an Excel thing. If you open the CSV in notepad, are the characters there? I just tried with Chrome and Firefox on Windows 10 and it works (both also correctly save with a CSV extension), though the characters in question do show up weird in Excel. However, they appear correct in Notepad. Can't test with Edge unfortunely.

Thanks for testing the issue. The characters shows correctly if the file (without extension) is opened in notepad or sublime but in excel are still there. I think excel doesn't recognize the encoding of the component.

I decided to do some digging and it looks like Excel will won't open the file with a UTF-8 encoding unless a BOM character is found at the beginning. I made a modified version of the repo and adding the BOM character fixes the issue for me:

https://codesandbox.io/s/mui-datatables-jckqv

However, I don't know if this character negatively impacts how other spreadsheet programs interpret the CSV file.

I think I figured it out. Add an onDownload method to your options object that looks like this:

  onDownload: (buildHead, buildBody, columns, data) => {
    return "\uFEFF" + buildHead(columns) + buildBody(data);
  }

That'll add the BOM. It can't be added by default because it messes up other spreadsheet programs.

Thank you @patorjk. Using the BOM solved the problem to show the special characters on Windows and now it downloads the file with the correct extension in Edge.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Andy1408 picture Andy1408  路  4Comments

alexanderwhatley picture alexanderwhatley  路  4Comments

mhmmdakbr picture mhmmdakbr  路  4Comments

demoreno picture demoreno  路  4Comments

NickToye picture NickToye  路  4Comments