(fetchFile_bs5.html)
<html> <title></title> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> </head> <body> <script> function fetchFile(e){ if( this.method === 'GET' ){ options = { method: this.method, cache: 'no-store' }; }else if( this.method === 'POST' ){ let form = document.getElementById(this.formid); let formData = new FormData(form); options = { method: this.method, body: formData }; }else{ console.log("ELSE"); } fetch(this.url, options) .then((response) => { console.log("response"); document.getElementById('exampleModalBody').innerHTML = 'ダウンロード中'; if(!response.ok){ return response.text().then(text => {throw new Error(text)}) } return response.blob(); }) .then((blob) => { console.log('blob'); setTimeout(()=>{ let anchor = document.createElement('a'); document.body.appendChild(anchor); anchor.href = window.URL.createObjectURL(blob); anchor.download = this.formid + '.jpg' anchor.click(); document.body.removeChild(anchor); },1000); }) .catch(function(err){ console.log('catch:' + err); document.getElementById('exampleModalBody').innerHTML = err; }) .finally(function(){ console.log('finally'); let myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('exampleModal')); setTimeout(() => { myModal.hide(); },1000); }); } </script> <div class="container px-5 py-3"> <form id="form_get"> <button type="button" value="get" name="get" id="button_get" data-bs-toggle="modal" data-bs-target="#exampleModal">get</button> </form> </div> <div class="container px-5 py-3"> <form id="form_post"> <input type="text" name="a"> <input type="text" name="b"> <button type="button" value="post" name="post" id="button_post" data-bs-toggle="modal" data-bs-target="#exampleModal">post</button> </form> <!-- Modal --> <div class="modal fade" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" id="exampleModalBody"> ダウンロード中 </div> </div> </div> </div> <script> let button_get = document.getElementById('button_get'); button_get.addEventListener('click', {method:'GET', url:'http://localhost:4567/get', formid: 'form_get', handleEvent: fetchFile}); let button_post = document.getElementById('button_post'); button_post.addEventListener('click', {method:'POST', url:'http://localhost:4567/post', formid: 'form_post', handleEvent: fetchFile}); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </body> </html>