How to create semicolon separated CSV in Javascript with custom file name?

Question

There is a lot of info on how to create a CSV file with Javascript here on Stack Overflow. But I'm struggling to find a way to create semicolon separated data and be able to set the file name on download.

Below is a simplified version of my code. The last lines demonstrates the problem: CSV with colon works well. CSV with semi colon fails, the browser will not download the file (Chrome says "network error").

const arrayToCsvFile = (dataArray, delimiter, filename) => {
  const csv = createCsv(dataArray, delimiter);
  exportCsvToFile(csv, filename, delimiter);
};

const createCsv = (rows, delimiter) => {
  let returnStr = "";
  rows.forEach(row => {
    row.forEach(field => {
      returnStr += field + delimiter;
    });
    returnStr += "\r\n";
  });
  return returnStr;
};

const exportCsvToFile = (csvData, filename, delimiter) => {
  csvData = "data:text/csv;charset=utf-8" + delimiter + csvData;
  const encodedUri = encodeURI(csvData);
  // Trick to set filename
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", filename);
  document.body.appendChild(link); // Required for Firefox(?)
  link.click();
};


const testData = [["a", "b", "c"], ["1", "2", "3"]];

// Line below works
// arrayToCsvFile(testData, ",", "myCustomFileNameWithCommaSep.csv");

// This does not work - browser fails to download file.
arrayToCsvFile(testData, ";", "myCustomFileNameWithSemiSep.csv");

Your CSV generating function is very primitive and doesn't appear to be able to escape any characters. You should strongly consider using a library like papaparse.com (which has an unparse function to generate CSV from a JavaScript data structure). — Quentin
– Quentin, Commented Jul 30, 2019 at 9:51
My real world data is only numbers. But thanks for the tip @quentin, I will keep it in mind. — HoffZ
– HoffZ, Commented Jul 30, 2019 at 10:58

HoffZ · Accepted Answer · 2019-07-30 10:59:52Z

csvData = "data:text/csv;charset=utf-8" + delimiter + csvData;

Notice that delimiter parameter gets appended here, which is semicolon in your case. Just change that to comma and it should work fine:

csvData = "data:text/csv;charset=utf-8," + csvData;

const arrayToCsvFile = (dataArray, delimiter, filename) => {
  const csv = createCsv(dataArray, delimiter);
  exportCsvToFile(csv, filename, delimiter);
};

const createCsv = (rows, delimiter) => {
  let returnStr = "";
  rows.forEach(row => {
    row.forEach(field => {
      returnStr += field + delimiter;
    });
    returnStr += "\r\n";
  });
  return returnStr;
};

const exportCsvToFile = (csvData, filename, delimiter) => {
  // FIXED: Comma instead of semicolon
  csvData = "data:text/csv;charset=utf-8," + csvData;
  const encodedUri = encodeURI(csvData);
  // Trick to set filename
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", filename);
  document.body.appendChild(link); // Required for Firefox(?)
  link.click();
};


const testData = [["a", "b", "c"], ["1", "2", "3"]];

// Line below works
// arrayToCsvFile(testData, ",", "myCustomFileNameWithCommaSep.csv");

// This will now also work!
arrayToCsvFile(testData, ";", "myCustomFileNameWithSemiSep.csv");

Quentin · Accepted Answer · 2019-07-30 09:48:29Z

2

Look at the definition of the data URI scheme.

data:[<media type>][;base64],<data> 
…
The data, separated from the preceding part by a comma (,).

Now look at your code:

csvData = "data:text/csv;charset=utf-8" + delimiter + csvData;

You're reusing the delimiter you use in your CSV for your data URI, but the data URI delimited must be a comma!

Use a comma there:

csvData = "data:text/csv;charset=utf-8," + csvData;

answered Jul 30, 2019 at 9:48

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

3 Comments

Venkatesh Dharavath Over a year ago

data:[<media type>][;base64],<data> If comma must be there, how can I create a semicolon separated csv? Can't I use something like this csvData = "data:text/csv;charset=utf-8;" + csvData; ?

Quentin Over a year ago

Having a comma between the media type and the data has nothing at all to do with the content of the data.

Venkatesh Dharavath Over a year ago

Okay @Quentin , So there is nothing like we need to mention the delimiter which we used in the content? Can I directly use ; in the content instead of , to create a semicolon separated CSV?

Collectives™ on Stack Overflow

How to create semicolon separated CSV in Javascript with custom file name?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related