React-bootstrap-table2: Export CSV not working with a different encoding than UTF-8

Created on 4 Dec 2019 · 10Comments · Source: react-bootstrap-table/react-bootstrap-table2

Hello.

I want to export the content of the table in ANSI encoding. I must do that because Excel 2016 doesn't read utf-8 csv file correctly.

I pass the following options to ToolkitProvider
exportOptions = {
fileName: 'export.csv',
noAutoBOM: false, // true or false, both won't work
separator: ';',
blobType: 'text/csv;charset=ansi' // also tried "application/octet-stream", etc.
};

The file will always be exported in UTF-8.

I've seen this issue:
https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/702
It doesn't work for me.

Maybe this is the solution ?
https://github.com/eligrey/FileSaver.js/issues/28

Thanks for your reply.

Source

luupqvinh

Most helpful comment

@AllenFang
I add '\uFEFF' at transform func() for this code.

react-bootstrap-table2-toolkit/lib/src/csv/exporter.js

var transform = exports.transform = function transform(data, meta, columns, _, _ref) {
  var separator = _ref.separator,
      ignoreHeader = _ref.ignoreHeader,
      ignoreFooter = _ref.ignoreFooter;

  var visibleColumns = meta.filter(function (m) {
    return m.export;
  });
  var content = '\uFEFF';  **<================This**
  // extract csv header
  if (!ignoreHeader) {
    content += visibleColumns.map(function (m) {
      return '"' + m.header + '"';
    }).join(separator);
    content += '\n';
  }

the data is correct for excel. Please consider about this.

weezer924 on 26 Mar 2020

👍3

All 10 comments

@luupqvinh we leverage fileSaver and in our source we did the same thing like eligrey/FileSaver.js#28. So I think so far I still also have no idea about this issue. maybe we can discover more detail from fileSaver, but need some time.

AllenFang on 5 Dec 2019

@AllenFang could you upload an update for issue of the accents.?
The problem is solved by adding "\uFEFF" before content.
_fileSaver2.default.saveAs(new Blob(["\uFEFF"+content], { type: blobType }), fileName, noAutoBOM);
In the file exporter.js

josemsp on 12 Dec 2019

Any updates on this issue?

g-akshay on 10 Feb 2020

I am having the same problem... Cannot save file with ANSI encoding... Any solution?

gustavoergalves on 4 Mar 2020

@AllenFang
I add '\uFEFF' at transform func() for this code.

react-bootstrap-table2-toolkit/lib/src/csv/exporter.js

var transform = exports.transform = function transform(data, meta, columns, _, _ref) {
  var separator = _ref.separator,
      ignoreHeader = _ref.ignoreHeader,
      ignoreFooter = _ref.ignoreFooter;

  var visibleColumns = meta.filter(function (m) {
    return m.export;
  });
  var content = '\uFEFF';  **<================This**
  // extract csv header
  if (!ignoreHeader) {
    content += visibleColumns.map(function (m) {
      return '"' + m.header + '"';
    }).join(separator);
    content += '\n';
  }

the data is correct for excel. Please consider about this.

weezer924 on 26 Mar 2020

👍3

@AllenFang
I would like to create a PR for this isuue.

weezer924 on 26 Mar 2020

@AllenFang I'm having the same issue when exporting to CSV with Chinese characters. And the solution above _fileSaver2.default.saveAs(new Blob(["\uFEFF"+content], { type: blobType }), fileName, noAutoBOM); works really well. Probably noAutoBOM option does not work with FileSaver.js any longer?