ทำเว็บด้วย AI แล้วให้ผู้ใช้ดาวน์โหลดไฟล์ได้ไหม? วิธีทำ export PDF, Excel, CSV และ ZIP จากเว็บที่สร้างเอง

ทำได้แน่นอน และหลายกรณีทำได้โดยไม่ต้องมี server หรือ database เลย เพราะ browser สมัยนี้สร้างไฟล์แล้วให้ผู้ใช้ดาวน์โหลดได้เอง ไม่ว่าจะเป็น PDF, Excel, CSV หรือ ZIP โจทย์จริงจึงไม่ใช่ว่าทำได้ไหม แต่เป็นว่าจะเลือกไฟล์แบบไหนให้ตรงกับงาน และจะสั่ง AI ยังไงให้ได้ไฟล์ที่เปิดแล้วภาษาไทยไม่เพี้ยน ซึ่งเป็นจุดที่คนทำเว็บด้วย AI สะดุดบ่อยที่สุด

บทความนี้เขียนสำหรับคนที่ใช้ Claude Code, Codex, Cursor หรือเครื่องมือใกล้เคียงสร้างเว็บ แล้วถึงจุดที่ผู้ใช้ถามว่า "ขอเป็นไฟล์ได้ไหม" จะพาไล่ตั้งแต่การเลือกชนิดไฟล์ วิธีทำแต่ละแบบ ปัญหาที่เจอจริง ไปจนถึงตัวอย่างผลงานของคนไทยที่ทำระบบ export ใช้งานอยู่

ทำไมฟีเจอร์ดาวน์โหลดไฟล์ถึงสำคัญกว่าที่คิด

เว็บที่สวยแค่ไหน ถ้าข้อมูลติดอยู่บนหน้าจอ ผู้ใช้ก็เอาไปทำอะไรต่อไม่ได้ ลองนึกถึงงานจริงดู ใบเสนอราคาต้องส่งให้ลูกค้าเป็น PDF รายงานเวลาทำงานต้องส่งให้ฝ่ายบัญชีเป็น Excel ข้อมูลพอร์ตการลงทุนต้องเก็บไว้เป็นไฟล์เผื่อเว็บปิด เกมที่เล่นบนมือถือก็ต้องมีทางสำรอง save ไว้ย้ายเครื่อง

ฟีเจอร์ export จึงเป็นสะพานระหว่างเว็บของคุณกับโลกที่ผู้ใช้ทำงานอยู่จริง และยังเป็นเรื่องความไว้ใจด้วย ผู้ใช้กล้ากรอกข้อมูลลงเว็บของคนทำคนเดียวมากขึ้น ถ้ารู้ว่าดึงข้อมูลของตัวเองออกมาได้ตลอด

เลือกชนิดไฟล์ให้ตรงกับงาน

ก่อนสั่ง AI ให้ตอบคำถามเดียวก่อน ผู้ใช้จะเอาไฟล์นี้ไปทำอะไรต่อ ถ้าเอาไปพิมพ์หรือส่งให้คนอื่นดู ใช้ PDF ถ้าเอาไปคำนวณต่อ ใช้ Excel หรือ CSV ถ้าเอาไปนำเข้าโปรแกรมอื่น ใช้ CSV หรือ JSON ถ้ามีหลายไฟล์ ใช้ ZIP

แนวทางที่ใช้ได้กับคนทำคนเดียวคือเริ่มจาก CSV หรือ JSON ก่อน เพราะทำง่ายที่สุดและแทบไม่มีอะไรพัง แล้วค่อยเพิ่ม PDF เมื่อผู้ใช้ต้องการเอกสารที่ดูเป็นทางการ

PDF ทำได้ 2 ทาง และเลือกผิดจะเสียเวลามาก

ทางที่ 1 สร้างในเครื่องผู้ใช้

วิธีนี้ใช้ JavaScript ใน browser สร้าง PDF โดยตรง library ที่ AI มักหยิบมาใช้คือ jsPDF หรือ pdf-lib ข้อดีคือไม่ต้องมี server ไม่มีค่าใช้จ่ายต่อการสร้าง และข้อมูลผู้ใช้ไม่ต้องวิ่งออกจากเครื่อง เหมาะกับเอกสารที่ layout ไม่ซับซ้อนมาก เช่น ใบเสนอราคา 1 ถึง 2 หน้า

จุดที่พังแน่นอนถ้าไม่บอก AI ล่วงหน้าคือ font ไทย เพราะ font มาตรฐานใน jsPDF ไม่มีอักษรไทย ผลคือได้ PDF ที่เป็นกล่องสี่เหลี่ยมหรือตัวว่าง วิธีแก้คือต้องฝัง font ไทยลงไป เช่น Sarabun หรือ Noto Sans Thai แล้วสั่งให้ใช้ font นั้นก่อนเขียนข้อความทุกครั้ง เรื่องนี้ควรเขียนไว้ใน prompt ตั้งแต่แรก ไม่ใช่รอให้พังแล้วค่อยแก้

อีกวิธีที่ง่ายกว่าคือทำหน้าเอกสารเป็น HTML ธรรมดาที่จัด CSS ให้สวย แล้วเรียกคำสั่ง print ของ browser ให้ผู้ใช้เลือก Save as PDF เอง วิธีนี้ font ไทยไม่มีปัญหาเพราะ browser จัดการให้ เหมาะกับงานที่ทำใช้เองหรือให้คนในทีมใช้

ทางที่ 2 สร้างบน server

ถ้าเอกสารมีตาราง หลายหน้า มีรูป มี header และ footer ทุกหน้า การสร้างบน server จะคุมผลได้ดีกว่า วิธีที่นิยมคือเขียนเอกสารเป็น HTML แล้วใช้ headless browser อย่าง Puppeteer หรือ Playwright แปลงเป็น PDF ผลที่ได้จะเหมือนที่เห็นในหน้าเว็บทุกประการ

ข้อควรระวังคือ headless browser กินทรัพยากรมาก ถ้า deploy บนบริการแบบ serverless อาจติดเรื่องขนาด function หรือเวลาทำงาน ทางเลือกที่เบากว่าคือ library ที่สร้าง PDF จาก component โดยตรง เช่น react-pdf ซึ่งเข้ากับ Next.js ได้ดี แต่ต้องลงทะเบียน font ไทยเช่นกัน

Excel กับ CSV ต่างกันตรงไหน และทำยังไงให้ไทยไม่เพี้ยน

CSV คือไฟล์ข้อความธรรมดาที่คั่นด้วยจุลภาค สร้างได้ด้วยโค้ดไม่กี่บรรทัด แต่ปัญหาคลาสสิกคือเปิดด้วย Excel บน Windows แล้วภาษาไทยกลายเป็นตัวอักษรประหลาด สาเหตุคือ Excel ไม่รู้ว่าไฟล์เป็น UTF-8 วิธีแก้ง่ายมาก แค่ใส่ BOM (byte order mark) ไว้ต้นไฟล์ สั่ง AI ว่า "ใส่ UTF-8 BOM ที่ต้นไฟล์ CSV เพื่อให้ Excel แสดงภาษาไทยถูกต้อง" ก็จบ

ส่วน Excel แบบ xlsx เหมาะเมื่อผู้รับต้องการสูตร หลาย sheet หรือการจัดรูปแบบ library ที่ AI มักใช้คือ SheetJS หรือ ExcelJS ปัญหาที่เจอบ่อยคือตัวเลขถูกเก็บเป็นข้อความ ทำให้ผู้รับเอาไปรวมยอดไม่ได้ และวันที่ที่ส่งไปเป็นข้อความไทยแล้ว Excel ไม่รู้จัก ทางที่ดีคือส่งตัวเลขเป็นตัวเลขจริง ส่งวันที่เป็น date object และปล่อยให้ Excel จัดรูปแบบเอง

ถ้ายังลังเล ให้นึกถึงผู้รับ ฝ่ายบัญชีที่ต้องเอาไปทำต่ออยากได้ Excel ส่วนโปรแกรมหรือระบบอื่นที่จะนำเข้าอยากได้ CSV

ZIP สำหรับงานที่ผลลัพธ์เป็นหลายไฟล์

บางเว็บไม่ได้ให้ผลลัพธ์เป็นเอกสาร แต่ให้เป็นชุดไฟล์ เช่น เครื่องมือออกแบบที่ส่งออกเป็น HTML กับ CSS หรือระบบที่ให้ดาวน์โหลดรูปหลายรูปพร้อมกัน กรณีนี้ใช้ JSZip รวมไฟล์ในเครื่องผู้ใช้แล้วสร้างลิงก์ดาวน์โหลดได้เลย ข้อควรระวังคือถ้าไฟล์รวมกันใหญ่หลายสิบ MB บนมือถืออาจค้าง ควรแสดงสถานะกำลังสร้างไฟล์ให้ผู้ใช้เห็น

อย่าลืมขา import เพราะ export ที่ดีต้องกลับเข้ามาได้

ฟีเจอร์ที่มักถูกลืมคือการรับไฟล์กลับเข้ามา ถ้าเว็บของคุณเก็บข้อมูลในเครื่องผู้ใช้ (local storage) ซึ่งเป็นแนวทางที่คนทำคนเดียวนิยมเพราะไม่ต้องมี backend ข้อมูลจะหายทันทีเมื่อผู้ใช้ล้าง browser หรือเปลี่ยนเครื่อง การมีปุ่ม export save เป็น JSON แล้ว import กลับได้ จึงเป็นระบบสำรองข้อมูลที่ถูกที่สุด

ขา import ยังเปิดโอกาสให้ผู้ใช้ย้ายข้อมูลจากที่อื่นมาใช้เว็บของคุณ เช่น รับไฟล์ CSV จากโปรแกรมเดิม หรือรับ statement จากธนาคารมาอ่าน ส่วนนี้ต้องระวังเรื่องการตรวจสอบข้อมูลเป็นพิเศษ ไฟล์ที่ผู้ใช้อัปโหลดอาจมีคอลัมน์ไม่ครบ ค่าว่าง หรือรูปแบบวันที่หลายแบบ ควรสั่ง AI ให้แสดงตัวอย่างข้อมูลก่อนนำเข้าจริงและรายงานแถวที่อ่านไม่ได้

ตัวอย่างผลงานของคนไทยที่ทำระบบ export จริง

ดูจากผลงานบน applnw.com จะเห็นว่าฟีเจอร์ดาวน์โหลดไฟล์เป็นหัวใจของเว็บหลายตัว ไม่ใช่ของแถม

thform.com ให้สร้างและแก้ไขเอกสารธุรกิจ เช่น ใบเสนอราคา ใบแจ้งหนี้ ใบเสร็จรับเงิน ใบสั่งซื้อ และสัญญาจ้างงาน แล้วส่งออกเป็น PDF ได้โดยไม่มีค่าใช้จ่าย สร้างด้วย Next.js เป็นตัวอย่างชัดเจนว่า PDF ภาษาไทยที่หน้าตาเป็นทางการทำได้จริงจากเว็บที่สร้างเอง

PDF Toolkit รองรับการทำใบเสนอราคาและบิลผ่านหน้าเว็บ เจ้าของสร้างไว้เพื่อใช้งานเองเป็นหลักและเปิดให้ผู้อื่นทดลองใช้ อยู่บน Cloudflare Pages จุดน่าสนใจคือเริ่มจากแก้ปัญหาตัวเอง ซึ่งเป็นจุดเริ่มที่ดีที่สุดของเครื่องมือประเภทนี้

Template Builder ให้ออกแบบหน้า website ด้วยการลากวาง เลือกชุดสี บันทึกองค์ประกอบไว้ใช้ซ้ำ แล้วส่งออก HTML/CSS ในรูปแบบ ZIP สร้างด้วย Next.js บน Vercel เป็นตัวอย่างของผลลัพธ์แบบหลายไฟล์ที่ต้องรวมเป็น ZIP

Anajak HR บันทึกเวลาเข้าและเลิกงานผ่านมือถือพร้อมรูปถ่ายและตรวจสอบ GPS พนักงานขอ OT และลางานได้ ส่วนหัวหน้าและผู้ดูแลอนุมัติ ดูประวัติ และส่งออกรายงานเป็น Excel หรือ CSV ได้ นี่คือกรณีที่ผู้รับไฟล์เป็นฝ่ายที่ต้องเอาไปทำต่อ จึงให้ทั้ง 2 แบบ

AlphaOS เป็นตัวอย่างฝั่ง import รวม US stocks หุ้นไทย และกองทุนจากหลาย broker โดยนำเข้าข้อมูลผ่าน statement, CSV, screenshot หรือกรอกเอง และเชื่อม Claude, ChatGPT หรือ Gemini เพื่อช่วยอ่าน statement แสดงให้เห็นว่าการรับไฟล์เข้ามาได้หลายรูปแบบช่วยลดงานผู้ใช้มหาศาล

CEO City 3D เกมที่เล่น offline บนมือถือได้ ผู้เล่นบันทึกข้อมูลในเครื่อง และ export หรือ import save ได้ เป็นตัวอย่างตรงของเว็บที่ไม่มี backend แล้วใช้ไฟล์เป็นระบบสำรองข้อมูล

สั่ง AI ยังไงให้ได้ระบบ export ที่ใช้ได้ตั้งแต่รอบแรก

prompt ที่ดีสำหรับฟีเจอร์นี้ควรระบุ 5 อย่าง ชนิดไฟล์และชื่อไฟล์ ข้อมูลที่ต้องอยู่ในไฟล์และลำดับคอลัมน์ ภาษาและ font ที่ต้องรองรับ สถานที่สร้างไฟล์ว่าในเครื่องผู้ใช้หรือบน server และพฤติกรรมเมื่อผิดพลาด

ตัวอย่าง prompt ที่ใช้ได้ทันที

``
เพิ่มปุ่ม "ดาวน์โหลด PDF" ในหน้าใบเสนอราคา
สร้าง PDF ในฝั่ง browser ด้วย jsPDF
ฝัง font Sarabun จากไฟล์ใน public/fonts เพื่อให้ภาษาไทยแสดงถูกต้อง
ใส่ชื่อร้าน เลขที่เอกสาร วันที่ ตารางรายการ ยอดรวม และหมายเหตุ
ตั้งชื่อไฟล์ตามเลขที่เอกสาร เช่น QT-0001.pdf
ถ้าสร้างไม่สำเร็จให้แสดงข้อความแจ้งผู้ใช้ ไม่ใช่ค้างเงียบ
``

สำหรับ CSV ให้เพิ่มบรรทัดว่า "ใส่ UTF-8 BOM ที่ต้นไฟล์" และสำหรับ Excel ให้เพิ่มว่า "ส่งตัวเลขเป็น number และวันที่เป็น date ไม่ใช่ string" แค่ 2 บรรทัดนี้ตัดปัญหาที่เจอบ่อยที่สุดออกไปได้เกือบหมด

เช็กลิสต์ก่อนเปิดให้คนใช้จริง

1. เปิดไฟล์ที่ได้ด้วยโปรแกรมที่ผู้ใช้จริงใช้ ไม่ใช่แค่ดูใน browser PDF ให้ลองเปิดบนมือถือ Excel ให้ลองเปิดบน Windows
2. ทดสอบด้วยข้อมูลที่มีภาษาไทย สระบนล่าง วรรณยุกต์ และตัวเลขทศนิยม
3. ทดสอบเอกสารที่ยาวเกิน 1 หน้า ดูว่าตารางถูกตัดกลางแถวหรือไม่
4. ทดสอบกับข้อมูลว่าง หรือรายการ 0 แถว ว่าไม่พัง
5. บนมือถือ ตรวจว่าปุ่มดาวน์โหลดทำงานทั้ง Safari และ Chrome เพราะพฤติกรรมการดาวน์โหลดต่างกัน
6. ถ้าสร้างบน server ตรวจว่าไฟล์ไม่ค้างอยู่ใน server หลังส่งให้ผู้ใช้แล้ว และ URL ดาวน์โหลดไม่เปิดให้คนอื่นเข้าถึงได้

สรุป

เว็บที่สร้างด้วย AI ให้ผู้ใช้ดาวน์โหลดไฟล์ได้แน่นอน และส่วนใหญ่ทำได้ในเครื่องผู้ใช้โดยไม่ต้องมี backend เริ่มจาก CSV หรือ JSON ที่ง่ายที่สุด เพิ่ม PDF เมื่อต้องการเอกสารที่เป็นทางการ ใช้ Excel เมื่อผู้รับต้องเอาไปคำนวณต่อ และใช้ ZIP เมื่อผลลัพธ์มีหลายไฟล์ สิ่งที่ต้องบอก AI ตั้งแต่แรกมี 3 เรื่อง font ไทยสำหรับ PDF, BOM สำหรับ CSV และชนิดข้อมูลสำหรับ Excel ถ้าเริ่มจากตรงนี้ ฟีเจอร์ที่ดูเหมือนยากจะเสร็จในไม่กี่รอบของการสั่ง และอย่าลืมทำขา import คู่กันไว้ด้วย เพราะไฟล์ที่ออกไปแล้วกลับเข้ามาได้ คือสิ่งที่ทำให้ผู้ใช้ไว้ใจเว็บของคนทำคนเดียว