axios を使用して vue.js 経由でダウンロード機能を実装する (詳細なチュートリアル)

以下に、vue.js を使用して axios を使用してダウンロード機能を実装する例を紹介します。これは良い参考値であり、皆さんの役に立つことを願っています。

この記事は主に Zhihu の回答から来ています。小さいですが、非常に便利なコードです。

axios がどのようにリクエストを取得し、ファイルをダウンロードするかについて答えなければなりません。 。

Ajaxがファイルをダウンロードできない理由

ブラウザのGET(フレーム、a)リクエストとPOST(フォーム)リクエストには以下の特徴があります:

レスポンスはブラウザによって処理されます

レスポンスの内容は

Ajax リクエストには次の特徴があります:

レスポンスは Javascript によって処理される

レスポンスの内容は文字列のみである

したがって、Ajax 自体は、ブラウザ。

Axios はリクエストをインターセプトし、ダウンロードを実装します

ファイルをダウンロードするには、通常次の手順を使用します:

リクエストを送信する

レスポンスを取得する

レスポンスを使用して、戻り値はファイルです

ファイルの場合は、ページにフレームを挿入します

フレームを使用してブラウザのダウンロード取得を実装します

axios にインターセプタを追加できます:

import axios from 'axios'
// download url
const downloadUrl = url => {
 let iframe = document.createElement('iframe')
 iframe.style.display = 'none'
 iframe.src = url
 iframe.onload = function () {
 document.body.removeChild(iframe)
 }
 document.body.appendChild(iframe)
}
// Add a response interceptor
axios.interceptors.response.use(c=> {
 // 处理excel文件
 if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
 downloadUrl(res.request.responseURL)
 
 <span style="color:#ff0000;"> res.data=&#39;&#39;;
 res.headers[&#39;content-type&#39;] = &#39;text/json&#39;
 return res;</span>
 }
 ...
 return res;
}, error => {
 <span style="color:#ff0000;">// Do something with response error
 return Promise.reject(error.response.data || error.message)</span>
})
export default axios

その後、次のことができますaxios の get リクエストを通じてファイルをダウンロードします。

上記は私があなたのためにまとめたものです。

関連記事:

nodejsでQRコードを生成する超簡単なメソッドを実装

nodejs+mongodb集約カスケードクエリ操作例

VueページのDOM操作が反映されない問題を解決

以上がaxios を使用して vue.js 経由でダウンロード機能を実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。