การสร้างหน้าทรัพยากรและชุดข้อมูลดาวน์โหลด เช่น CSV หรือ JSON

การสร้างหน้าทรัพยากรและชุดข้อมูลดาวน์โหลดสามารถทำได้ด้วยการจัดหน้าให้ผู้ใช้เลือกไฟล์ได้ชัดเจน แล้วเชื่อมปุ่มดาวน์โหลดกับไฟล์ที่เตรียมไว้ เช่น CSV หรือ JSON ซึ่งฝั่งเว็บเบราว์เซอร์นิยมใช้ Blob, URL.createObjectURL() และลิงก์ <a> ที่มี download เพื่อเริ่มดาวน์โหลดไฟล์

แนวทางที่ใช้บ่อย

• จัดทำหน้ารายการทรัพยากรพร้อมชื่อไฟล์ คำอธิบาย และประเภทไฟล์ เช่น CSV, JSON
• แยกไฟล์ดาวน์โหลดตามชุดข้อมูล หรือรวมไว้เป็นแพ็กเกจเดียว
• ถ้าข้อมูลมาจาก JSON แล้วต้องการ CSV ให้แปลงข้อมูลก่อนดาวน์โหลด
• ถ้าต้องการให้ดาวน์โหลดทันทีในเบราว์เซอร์ ให้สร้าง Blob จากข้อมูล แล้วสร้าง URL ชั่วคราวสำหรับไฟล์นั้น

ตัวอย่างโครงสร้างหน้า

<section>
  <h1>ทรัพยากรและชุดข้อมูล</h1>
  <ul>
    <li><a href="/downloads/products.csv" download>ดาวน์โหลดชุดข้อมูลสินค้า (CSV)</a></li>
    <li><a href="/downloads/products.json" download>ดาวน์โหลดชุดข้อมูลสินค้า (JSON)</a></li>
  </ul>
</section>

ถ้าต้องสร้างไฟล์จากข้อมูลในหน้าเว็บ

const data = [
  { id: 1, name: "A", price: 100 },
  { id: 2, name: "B", price: 200 }
];

const csv = [
  Object.keys(data).join(","),
  ...data.map(row => Object.values(row).map(v => `"${String(v).replace(/"/g, '""')}"`).join(","))
].join("\n");

const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "dataset.csv";
a.click();
URL.revokeObjectURL(url);

ข้อควรคำนึง

• ตั้งชื่อไฟล์ให้สื่อความหมายและสม่ำเสมอ
• ระบุชนิดไฟล์และขนาดไฟล์ให้ชัดเจน
• ถ้าเป็น CSV ให้จัดการอักขระพิเศษและเครื่องหมายคำพูดให้ถูกต้อง
• ถ้าให้ดาวน์โหลดจากฝั่งเซิร์ฟเวอร์ ควรมี endpoint สำหรับไฟล์และส่งไฟล์กลับไปโดยตรง

หากต้องการ สามารถช่วยร่างหน้าเว็บตัวอย่างแบบครบชุดสำหรับ “รายการทรัพยากร + ปุ่มดาวน์โหลด CSV/JSON” ให้ได้ทันที