มีวิธีที่ง่ายกว่า Fetch API: Download
งานที่ทำอยู่วันนี้ ต้องส่งข้อมูลไปให้อีกไฟล์เพื่อสร้างไฟล์ excel ให้ดาวน์โหลด แต่เพราะว่าจำเป็นต้องส่งรายการ ที่เลือกไปให้ด้วย บางครั้งมันยาวเกินกว่าที่จะส่งไปแบบ GET ทำให้ต้องส่งแบบ post และไม่อยากจะใช้วิธี submit form ไปอีกหน้าเพราะว่าหน้านี้เป็นแบบใช้ ajax ทั้งหมด ปัญหาคือ jquery ajax มันไม่รองรับการ download file จริง ๆ ถ้าจะทำก็ทำได้ แต่เขียนยุ่งยากมาก แต่ก็มีคนเขียน jquery.fileDownload ทำให้ทำได้ง่าย ๆ มาก ๆ แค่ใส่ url ไปแค่นั้นเอง
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>jquery.fileDownload</title> <link href="vendor/components/jqueryui/themes/base/jquery-ui.min.css" rel="stylesheet" type="text/css" /> </head> <body> <button id="downloadBtn" type="button">Download with dialog</button> <hr> <button id="downloadBtn1" type="button">Download without dialog</button> <hr> <form action="PHPExcel_writer_styles_border.php" id="formA" method="post"> <label>Search : <input name="search" type="text"></label> <button type="submit">Download with form</button> </form> <script src="vendor/components/jquery/jquery.min.js"></script> <script src="vendor/components/jqueryui/jquery-ui.min.js"></script> <script src="vendor/johnculviner/jquery.fileDownload/src/Scripts/jquery.fileDownload.js"></script> <script> $ (function () { $ ('#downloadBtn') .click (function (event) { event.preventDefault () ; $.fileDownload ('PHPExcel_writer_styles_border.php', { failMessageHtml: "There was a problem generating your report, please try again.", preparingMessageHtml: "We are preparing your report, please wait...", }) ; }) ; $ ('#downloadBtn1') .click (function (event) { event.preventDefault () ; $.fileDownload ('PHPExcel_writer_styles_border.php') ; }) ; $ ('#formA') .submit (function (event) { event.preventDefault () ; $.fileDownload ($ (this) .prop ('action') , { data: $ (this) .serialize () , failMessageHtml: "There was a problem generating your report, please try again.", httpMethod: "POST", preparingMessageHtml: "We are preparing your report, please wait...", }) ; }) ; }) ; </script> </body>
</html>