Exporting Table Data

Technical Deep Dive & Specifications

2.1 The RFC 4180 CSV Specification Rules

The Internet Engineering Task Force (IETF) RFC 4180 standard establishes the strict rules for valid CSV formatting:

1. Record Delimiters: Each record (row) is located on a separate line, terminated by a CRLF (\r\n) or LF (\n).
2. Field Separation: Fields within a record are separated by commas (,).
3. Mandatory Quoting: Any field containing a comma (,), double quote ("), or line break (\n) MUST be enclosed in double quotes ("...").
4. Quote Escaping Rule: If double quotes are used to enclose a field, then any double quote appearing inside that field must be escaped by preceding it with another double quote ("").
5. Leading Whitespace: Spaces are considered part of a field and should not be ignored.

CSV Escaping Transformation Examples:

Raw Cell Text              --> RFC 4180 Encoded Output
-----------------------------------------------------------
Mechanical Keyboard        --> Mechanical Keyboard
Acme, Inc.                 --> "Acme, Inc."
27" 4K Monitor             --> "27"" 4K Monitor"
Line 1\nLine 2             --> "Line 1\nLine 2"
Special, "Deluxe" Edition  --> "Special, ""Deluxe"" Edition"

function sanitizeCSVField(val) {
  const str = String(val ?? '').trim();
  // If string contains comma, quote, or newline, escape quotes and wrap in quotes
  if (/[",\n\r]/.test(str)) {
    return `"${str.replace(/"/g, '""')}"`;
  }
  return str;
}

2.2 Microsoft Excel & The UTF-8 Byte Order Mark (\uFEFF)

A notorious bug in Microsoft Excel on Windows is that opening a UTF-8 encoded .csv file directly causes non-ASCII characters (e.g. €, é, ¥, ä, ñ) to display as corrupted gibberish (e.g., é).

Why this happens: By default, Windows Excel assumes CSV files are encoded in legacy Windows-1252 / ANSI unless an explicit UTF-8 Byte Order Mark (BOM) is present at the very beginning of the byte stream.

The FAANG Solution: Prepend the UTF-8 BOM character \uFEFF (bytes 0xEF, 0xBB, 0xBF) to your CSV string before creating the Blob:

const BOM = '\uFEFF';
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });

2.3 Blob and URL.createObjectURL() Memory Lifecycle

1. In-Memory String ──▶ new Blob([content]) (Binary allocation in browser RAM)
2. Blob Reference   ──▶ URL.createObjectURL(blob) (Creates blob:http://localhost/uuid)
3. Anchor Element   ──▶ a.href = blobUrl; a.download = 'data.csv'; a.click()
4. Memory Cleanup   ──▶ URL.revokeObjectURL(blobUrl) (Releases RAM handle)

[!IMPORTANT] Every call to URL.createObjectURL() allocates an internal reference in browser memory. If you repeatedly generate download links without calling URL.revokeObjectURL(url), your application will leak memory. Always revoke the object URL shortly after triggering the download.

2.4 CSV Formula Injection (CSV Injection / CWE-1236)

When exporting user-generated content to CSV, attackers can inject spreadsheet formulas starting with =, +, -, or @. When opened in Microsoft Excel or Google Sheets, the spreadsheet engine may execute arbitrary macros or exfiltrate data.

Mitigation: If a cell value starts with =, +, -, @, \t, or \r, prepend a single quote (') to force the spreadsheet to treat it as passive plain text:

function preventFormulaInjection(str) {
  if (/^[=+\-@\t\r]/.test(str)) {
    return `'${str}`;
  }
  return str;
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 105–128: Cells define raw unformatted machine values via data-export-value (data-export-value="1299.50" vs €1,299.50), and the Action column is marked .no-export.
• Lines 135–148: escapeCSV() checks for formula injection, escapes internal quotes (" -> ""), and wraps delimited values in double quotes.
• Lines 156–172: Loops through rows, skipping hidden rows and .no-export cells.
• Lines 176–178: Prepends UTF-8 BOM (\uFEFF) and instantiates a binary Blob typed as text/csv;charset=utf-8;.
• Lines 181–186: Generates a temporary object URL, attaches a synthetic <a download> tag, triggers a programmatic .click(), and removes the link.
• Line 189: setTimeout(() => URL.revokeObjectURL(blobUrl), 150) frees browser memory.

Expected Browser Render Output

• Clicking "Export to CSV" immediately downloads sales-ledger-2026-08-21.csv.

• Opening the file in Excel or VS Code reveals:

• All accents (é, ü), commas, and quotation marks (32") are preserved cleanly.

  Transaction ID,Client Name,Description,Amount,Country
  TXN-9001,L'Oréal Paris,"High-Density 32"" Curved Display",1299.50,France
  TXN-9002,"Müller & Sons, GmbH","Industrial Hardware, Series #4",3400.00,Germany
  TXN-9003,"Nintendo Co., Ltd.",Software SDK Licenses,15000.00,Japan