มีวิธีที่ง่ายกว่า 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>
About the author