How To: Generate & Download Files in JS

« How To: CSS Scroll-Snap Carousel« Previous How To: Read & Update URL Query Parameters »Next »

Generate dynamic text, JSON, and CSV files in memory and trigger instant browser downloads.

Blob & createObjectURL Download Technique

Convert your data into a Blob, construct a temporary object URL with URL.createObjectURL(blob), attach it to a hidden <a download="filename.csv">, click it programmatically, and revoke the URL.

One-Click CSV Exporter

Try It Yourself »

function downloadCSV(csvContent, fileName = 'export.csv') {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', fileName);
  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
  URL.revokeObjectURL(url); // Clean up memory
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Why must you call URL.revokeObjectURL(url) after triggering a file download?

« Previous: How To: CSS Scroll-Snap Carousel Next: How To: Read & Update URL Query Parameters »