axios#
import axios from 'axios';
// Excelファイルのダウンロード関数を定義する
function downloadExcel() {
axios.get('http://example.com/download-excel', {
responseType: 'blob', // レスポンスデータのタイプをBlobに指定する
})
.then(response => {
// 一時的なURLオブジェクトを作成する
const url = URL.createObjectURL(new Blob([response.data]));
// aタグを作成し、属性を設定する
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.xlsx'); // ダウンロードするファイル名を指定する
// aタグをドキュメントに追加し、ダウンロードを模擬する
document.body.appendChild(link);
link.click();
// 一時的なURLオブジェクトをクリアする
URL.revokeObjectURL(url);
})
.catch(error => {
console.error('Excelファイルのダウンロード中にエラーが発生しました:', error);
});
}
上記の例では、axios を使用して GET リクエストを送信し、レスポンスタイプを blob に設定してバイナリデータを受け取ります。次に、レスポンスのバイナリデータを Blob オブジェクトに変換し、一時的な URL オブジェクトを作成します。その後、a タグを作成し、href 属性を一時的な URL に設定し、ダウンロードするファイル名を指定します。a タグをドキュメントに追加し、クリックイベントを発生させることでファイルのダウンロードを模倣します。最後に、一時的な URL オブジェクトをクリアしてリソースを解放します。
fetch#
以下は fetch を使用した例です：
fetch('http://example.com/download-excel', {
method: 'GET',
headers: {
'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // ファイルタイプをExcelに設定する
}
})
.then(response => response.blob())
.then(blob => {
// 一時的なURLオブジェクトを作成する
const url = URL.createObjectURL(blob);
// aタグを作成し、属性を設定する
const link = document.createElement('a');
link.href = url;
link.download = 'filename.xlsx'; // ダウンロードするファイル名を指定する
// aタグをドキュメントに追加し、ダウンロードを模擬する
document.body.appendChild(link);
link.click();
// 一時的なURLオブジェクトをクリアする
URL.revokeObjectURL(url);
})
.catch(error => {
console.error('Excelファイルのダウンロード中にエラーが発生しました:', error);
});
上記の例では、fetch を使用して GET リクエストを送信し、リクエストヘッダの Content-Type を Excel ファイルの MIME タイプに設定しています。次に、response.blob () メソッドを使用してレスポンスを Blob オブジェクトに変換し、一時的な URL オブジェクトを作成します。その後、a タグを作成し、href 属性を一時的な URL に設定し、ダウンロードするファイル名を指定します。a タグをドキュメントに追加し、クリックイベントを発生させることでファイルのダウンロードを模倣します。最後に、一時的な URL オブジェクトをクリアしてリソースを解放します。