ที่นี้มาถึงการที่ใช้ fetch download file จาก server ซึ่งวิธีนี้ง่ายกว่าการใช้ jQuery ดึงไฟล์มามาก จากที่เคยเขียน jQuery ajax download file เอาไว้จะเห็นว่าวิธีนี้ง่ายกว่ามาก
เริ่มจากการที่โหลด download.js มาก่อน โดยใช้คำสั่ง npm i downloadjs
ไฟล์กลางที่ไว้ใช้ร่วมกัน
scripts.js
/*
pitt phunsanit
default fetch api options
version 1
*/
let fetchOptions = {
"headers": {
'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
"method": "post"
};
/*
pitt phunsanit
get file name from fetch api
version 1
*/
function fetchGetFilename(response) {
let filename = '';
let disposition = response.headers.get('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
let matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) {
filename = matches[1].replace(/['"]/g, '');
}
}
return filename;
}
/*
pitt phunsanit
get status from fetch api
version 1
*/
function fetchStatus(Response) {
if (Response.status >= 200 && Response.status < 300) {
return Promise.resolve(Response);
} else {
return Promise.reject(new Error(Response.status + ' : ' + Response.statusText));
}
}
ตัวอย่างการใช้ fetch download file โดยใช้ downloadjs ช่วยให้ทำงานได้ทุกบราวเซอร์ (ยกเว้น IE ถ้าจะใช้กลับไปอ่าน Fetch API)
JavaScript/fetch.download.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Pitt Phunsanit">
<title>fetch: download</title>
</head>
<body>
<script src="../node_modules/downloadjs/download.min.js"></script>
<script src="../scripts.js"></script>
<script>
fetchOptions.body = 'file=ISO 3166-1 two aplha COUNTRY codes (01102009).xls&token=HH89VOiirgXlCdEqDrFs';
fetch('http://localhost/snippets/PHP/download.php', fetchOptions)
.then(fetchStatus)
.then(
function(response) {
if (response.ok) {
let fileName = fetchGetFilename(response);
let mimeType = response.headers.get('Content-Type');
response.blob().then(function(blob) {
download(blob, fileName, mimeType);
});
}
}
)
.catch(function(error) {
alert(error);
});
</script>
</body></html>
อ่านเพิ่มเติม