Bits of .NET

📥 Click to Download, Not to Preview

PDF opens in browser. Image displays. User right-clicks, “Save as”. download attribute forces download with custom filename.

📝 Basic Usage

<!-- Download with original filename -->
<a href="/files/report.pdf" download>Download PDF</a>

<!-- Download with custom filename -->
<a href="/files/report.pdf" download="Q4_Report_2024.pdf">
  Download PDF
</a>

<!-- Image download -->
<a href="image.jpg" download="vacation-photo.jpg">
  <img src="thumbnail.jpg" alt="Vacation">
</a>

🎯 Dynamic Content Download

<!-- Download from blob (generated content) -->
<a id="downloadLink">Download CSV</a>

<script>
const data = [{name: 'John'}, {name: 'Jane'}];
const csv = convertToCSV(data);
const blob = new Blob([csv], {type: 'text/csv'});
const url = URL.createObjectURL(blob);

const link = document.getElementById('downloadLink');
link.href = url;
link.download = 'users.csv';  // Forces download
link.click();

URL.revokeObjectURL(url);  // Clean up
</script>

✅ Supported File Types

• PDF, DOCX, XLSX, PPTX (Office documents)
• ZIP, RAR, TAR (archives)
• Images (JPG, PNG, GIF, WebP)
• Audio/Video (MP3, MP4, WAV)
• Text (TXT, CSV, JSON, XML)
• Generated content (blob: URLs)

💡 Limitations

• Only works for same-origin URLs (or blobs)
• Cross-origin URLs ignore download attribute (security)
• Requires user interaction (can’t trigger programmatically without click)
• Browsers may ignore if file type is commonly viewed (HTML)