ใช้แอตทริบิวต์ download ในแท็ก <a> เพื่อบังคับให้เบราว์เซอร์ดาวน์โหลดไฟล์แทนที่จะเปิดในแท็บใหม่
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<body>
<h1>ตัวอย่างลิงก์ดาวน์โหลด</h1>
<a href="https://example.com/image.jpg" download>
<img src="https://example.com/image.jpg" style="width: 300px; height: 300px;">
</a>
<h2>คลิกที่รูปภาพด้านบนเพื่อดาวน์โหลด</h2>
</body>
</html>
ผลลัพธ์
เมื่อคลิกที่รูปภาพ (หรือลิงก์) เบราว์เซอร์จะดาวน์โหลดไฟล์รูปภาพแทนที่จะแสดงในเบราว์เซอร์
ระบุชื่อไฟล์เมื่อดาวน์โหลด
สามารถกำหนดชื่อไฟล์ที่ต้องการให้บันทึกได้:
<a href="document.pdf" download="รายงานประจำปี2024.pdf">ดาวน์โหลดรายงาน</a>
ข้อจำกัดและข้อควรระวัง
- Same-Origin Policy: แอตทริบิวต์
downloadทำงานได้เฉพาะไฟล์ที่อยู่ในโดเมนเดียวกัน (Same Origin) หากเป็น Cross-Origin จะไม่ทำงานในเบราว์เซอร์สมัยใหม่ - รองรับเบราว์เซอร์: Chrome, Firefox, Edge, Opera (รุ่นใหม่) - ไม่รองรับ IE/Safari เก่า
- ประเภทไฟล์: ทำงานได้กับไฟล์ทุกประเภท (รูป, PDF, ZIP, TXT, etc.)
วิธีแก้ Cross-Origin Download
หากต้องดาวน์โหลดไฟล์จากโดเมนอื่น ให้ใช้วิธีฝั่งเซิร์ฟเวอร์ (Server-side) เช่น:
<?php
// download.php
$file = 'https://other-domain.com/file.pdf';
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="downloaded.pdf"');
readfile($file);
?>
แล้วลิงก์ไปที่ download.php แทน
