วันก่อนต้องเขียน API endpoint นึงแต่ไม่ใช่ ตอบกลับเป็น JSON แต่จะตอบเป็น content ของ PDF แทน ซึ่งเราอยากให้เมื่อกดลิ้งมาที่ endpoint นี้จากทาง browser แล้วให้ browser นั้นโหลดไฟล์ แทนที่จะเปิดไฟล์ผ่าน browser
วิธีที่ช่วยได้คือกำหนดค่าให้กับ header ที่ชื่อ Content-Disposition
เรามาดูตัวอย่างธรรมดากันก่อนแบบไม่ใช้ Content-Disposition ว่าพฤติกรรมของ browser นั้นเป็นยังไง ตัวอย่างเป็นโค้ด Go
ถ้าเรามีโค้ดแบบนี้
package main import ( "log" "net/http" "os" ) func main() { http.HandleFunc("/cat.jpg", func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "image/jpeg") b, err := os.ReadFile("image.jpg") if err != nil { log.Fatal(err) } w.Write(b) }) http.HandleFunc("/index.html", func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/html") b, err := os.ReadFile("index.html") if err != nil { log.Fatal(err) } w.Write(b) }) http.ListenAndServe(":8000", nil) } และส่วนของ index.html เป็นแบบนี้
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Load</title> </head> <body> <a href="/cat.jpg">Download Picture</a> </body> </html> เมื่อรันโค้ดแล้วเข้าไปที่ localhost:8000/index.html จะเจอลิ้ง download แบบนี้
และเมื่อเรากดลิ้งจะเห็นว่า browser นั้นเปิดใน browser เลยแบบนี้
ทีนี้ถ้าเราต้องการให้ browser โหลดไฟล์แทนเราสามารถกำหนด header Content-Disposition ไปแบบนี้
package main import ( "log" "net/http" "os" ) func main() { http.HandleFunc("/cat.jpg", func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "image/jpeg") w.Header().Set("Content-Disposition", `attachment; filename="cat.png"`) b, err := os.ReadFile("image.jpg") if err != nil { log.Fatal(err) } w.Write(b) }) http.HandleFunc("/index.html", func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/html") b, err := os.ReadFile("index.html") if err != nil { log.Fatal(err) } w.Write(b) }) http.ListenAndServe(":8000", nil) } ส่วนค่าของ header คือกำหนดเป็น
`attachment; filename="cat.png"` ตรง filename คือกำหนดชื่อไฟล์ที่จะให้ browser ใช้เซฟตอน download นั่นเอง
ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ
ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth
ขอบคุณครับ 🙏
Top comments (0)