フロントエンド Xiaobai の最初の csdn 記事は、自分で記録して研究する必要があります。
誰かが私と異なっていて閲覧時間を無駄にしないように、私が遭遇した状況を前面に書きます。
ダウンロード インターフェイスのバックエンドを呼び出すことによって返されるデータ形式 (つまり、ファイル ストリーム形式) は次のとおりです。
1. ボタン定義クリックイベント
2. バックエンドインターフェイスを呼び出す
axios リクエストを使用してファイル API インターフェイスをダウンロードする場合は、さまざまなリクエスト メソッドの使用を区別することに注意してください。構文は次のとおりです。
// axios が responseType を設定する方法は次のようになります
const url = '/info/download'
// get、delete、head およびその他のリクエスト
axios.get(url, {params: {}, responseType: 'blob' })
.then( (res) => {})
.catch((err) => {})
// post、put、patch、およびその他のリクエスト
axios.post(url, {...params}, {responseType: 'blob'})
. then((res) => {})
.catch((err) => {})
3. 具体的な実装コードは次のとおりです (直接コピーして貼り付けることができます)。
注: サービスは axios をカプセル化します
ダウンロード() {
サービス（{
メソッド: "取得"、
url: `バックエンドによって提供されるインターフェイス`,
応答タイプ: "ブロブ"、
}).then((res) => {
console.log(res);
console.log(res.data.type);
let blob = new Blob([res.data], { type: res.data.type });
let url = window.URL.createObjectURL(blob);
コンソール.ログ(url);
let link = document.createElement("a");
link.style.display = "なし";
リンク.href = URL;
link.setAttribute("download", "filename+suffix");//ファイル名の接尾辞、つまり私が作成した zip を忘れずに追加してください
document.body.appendChild(リンク);
リンク.クリック();
document.body.removeChild(link);//ダウンロード後に要素を削除
window.URL.revokeObjectURL(url);//BLOB オブジェクトを解放します