How do I export csv data consistently across browsers?

Question

I have an array of time sheet data that I want to export as a csv file. My current implementation works great in Chrome, but not in Firefox or Safari (I haven't tested other browsers).

Here's an example of what I'm working with

rows = [
  ["Client", "Project", "User", "Duration (mins)", "Description", "Duration (hh:mm)"],
  ["foo", "foo_project", "foo bar", 30, "I did some stuff here", "0:30"],
  ["foo", "foo_project", "foo bar", 180, "And some more stuff during this one", "2:00"],
  ["bar", "bar_project", "foo bar", 9, "Only worked for nine minutes here", "0:09"]
]

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

joinedRows = rows.map(row => row.join(','))

data = data + joinedRows.join("\n")

link = document.createElement("a")

link.setAttribute('href', data)

link.click()

Running this snippet in Chrome will give you a properly formatted csv file, but in Firefox, it will all be one row.

Is the way that I'm creating data the right way to do it?

let el = document.getElementById('button')
el.addEventListener('click', () => {
  rows = [
    ["Client", "Project", "User", "Duration (mins)", "Description", "Duration (hh:mm)"],
    ["foo", "foo_project", "foo bar", 30, "I did some stuff here", "0:30"],
    ["foo", "foo_project", "foo bar", 180, "And some more stuff during this one", "2:00"],
    ["bar", "bar_project", "foo bar", 9, "Only worked for nine minutes here", "0:09"]
  ]

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

  joinedRows = rows.map(row => row.join(','))

  data = data + joinedRows.join("\n")

  link = document.createElement("a")

  link.setAttribute('href', data)

  link.click()
})

<button id="button">Click to download</button>