Exporting Table Data to CSV on the Frontend Using Blob and a.download

For many backend management systems the frontend displays data in tables, and users often need to export that data to Excel or Numbers; while this is usually implemented on the server, it can also be done entirely in the browser.

CSV (comma‑separated values) is a plain‑text format where each column is separated by a comma and each row by "\r\n". In the browser we can create a Blob object that holds the CSV string, generate an object URL, and trigger a download using an a element with the download attribute.

A simple implementation converts a JSON array into a CSV string, creates a Blob, builds a temporary anchor, sets its href to the Blob URL, assigns a filename via download , programmatically clicks the anchor, and finally revokes the URL.

When exporting numbers, Excel may automatically format them as scientific notation or dates (e.g., “1‑1” becomes “Jan 1”). To avoid this, use a tab character followed by a comma (“\t,”) as the delimiter for such fields.

For more flexible output we can provide a config object that maps data keys (usually English) to column headers (e.g., Chinese). The export function then builds the header row from the config and assembles each data row accordingly.

This front‑end‑only approach works with any JavaScript framework (React, Vue, Angular), is lightweight, and eliminates the need for server‑side file generation, though it does not support complex features like merged cells.

Example code:

function exportCsv(data, config) {
  const headers = config ? Object.values(config) : Object.keys(data[0]);
  const rows = data.map(item => headers.map(h => {
    const key = config ? Object.keys(config).find(k => config[k] === h) : h;
    return item[key];
  }).join(','));
  const csvContent = [headers.join(','), ...rows].join('\r\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.csv';
  a.click();
  URL.revokeObjectURL(url);
}