この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。具体的な内容は次のとおりです。 エルボタン <el-button size="mini" type="success" @click="downloadHandle(fileName, fileLocation)">ダウンロード</el-button> js処理命令 リクエストインターセプター request.js
'axios' から axios をインポートします // axiosインスタンスを作成する const service = axios.create({ baseURL: '', // API のベース URL timeout: 20000, // リクエストタイムアウトパラメータ: { // リクエストパラメータ} }); // リクエストインターセプター service.interceptors.request.use(config => { // .... 設定追加処理...... 設定を返す } デフォルト サービスをエクスポートする リクエスト インターセプターはリクエストの前に処理され、HTTP ヘッダー設定を追加できます。次に例を示します。 1. HTTPリクエストヘッダー:トークン、Cookie、セッションなどの値が追加されます(config.headers['backend value name'] = 'related value';): (1) config.headers['token'] = 'トークン値'; 2. ヘッダー投稿設定: Content-Typeなど ファイルをアップロードするには、config.headers.post['Content-Type'] = 'multipart/form-data'; を使用します。 zipファイルをダウンロード1. request.js コード: 'axios' から axios をインポートします // axiosインスタンスを作成する const service = axios.create({ baseURL: '', // APIのベースURL timeout: 20000, // リクエストタイムアウトパラメータ: { // リクエストパラメータ} }); // リクエストインターセプター service.interceptors.request.use(config => { // config トークン値を追加 config.headers['token'] = getToken(); // getToken() は値取得メソッドで、システム検証では return config を使用します } デフォルト サービスをエクスポートする 2. Vueページはrequest.jsを参照します '@/utils/request' からリクエストをインポートします ダウンロード処理 // fileName ダウンロード設定名、fileLocation ファイル保存場所名 downloadHandle(fileName,fileLocation) { プローム = { ファイルの場所: ファイルの場所 } リクエスト.post( '/api/downloadFile', プロム、 { レスポンスタイプ: 'blob', タイムアウト: 60000 } ).then(応答 => { 応答サイズが等しい場合 this.$メッセージ({ メッセージ: 「ダウンロード可能なファイルがありません」 タイプ: '警告' }) 戻る } const url = window.URL.createObjectURL(新しいBlob([応答])) 定数リンク = window.document.createElement('a') link.style.display = 'なし' link.href = URL link.setAttribute('download', ファイル名+'.zip') document.body.appendChild(リンク) リンク.クリック() }).catch((データ) => { コンソール.log(データ) }) }, バックグラウンド処理 リクエスト /api/downloadFile に基づいて Java API によって処理されます パッケージ com.web.controller; org.springframework.web.bind.annotation.RequestBody をインポートします。 org.springframework.web.bind.annotation.RequestMapping をインポートします。 org.springframework.web.bind.annotation.RestController をインポートします。 javax.servlet.http.HttpServletRequest をインポートします。 javax.servlet.http.HttpServletResponse をインポートします。 java.io.File をインポートします。 java.io.FileInputStream をインポートします。 java.io.OutputStream をインポートします。 java.net.URLEncoder をインポートします。 java.util.Map をインポートします。 @レストコントローラ @リクエストマッピング("/api") パブリッククラスDownloadFileDemo { /** * ファイルのダウンロード * @param tranNap * @param リクエスト * @param レスポンス */ @RequestMapping(値 = "/downloadFile") パブリック void downloadFile(@RequestBody Map<String, Object> tranNap、HttpServletRequest リクエスト、HttpServletResponse レスポンス) { 文字列 fileLocation = tranNap.get("fileLocation")+""; 試す { 文字列 filePath = "D:/file/" + fileLocation + ".zip"; //ファイルを取得します。File file = new File(filePath); ファイルが存在する場合(){ System.out.println("[ファイルのダウンロード] ダウンロード可能なファイルがありません"); 戻る; } FileInputStream ファイル入力ストリーム = 新しい FileInputStream(ファイル); //ブラウザにファイル名をダウンロードするように指示するHttpレスポンスヘッダーを設定します。Filename response.setHeader("Content-Disposition", "attachment;Filename=" + URLEncoder.encode(fileLocation+".zip", "UTF-8")); 出力ストリーム outputStream = response.getOutputStream(); byte[] バイト = 新しい byte[2048]; 長さ = 0; ((len = fileInputStream.read(bytes)) > 0) の場合 { 出力ストリームに書き込みます(バイト数、0、長さ)。 } ファイル入力ストリームを閉じます。 出力ストリームを閉じます。 } キャッチ (例外 e) { System.out.println("[ファイルのダウンロード] ファイルのダウンロード例外"); e.printStackTrace(); 戻る; } } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ubuntu20.04 LTSにdockerをインストールする方法
>>: Windows 10にWSL2 Ubuntu20.04をインストールしてdocker環境を構築する方法
実装準備 # ファイルパスをバックアップする必要があります: /opt/apollo/logs/ac...
1. カーディナリティとは何ですか?カーディナリティとは、MySQL テーブルの列内の異なる値の数を...
1. 静的ページとは、Web ページ内に HTML タグのみが含まれるページです。WEB 開発者がこ...
会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...
ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...
MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...
Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...
この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...
目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...
この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...
目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...
注: Web 開発では、フォームに autocomplete="off" を追加...
目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....