Vue は zip ファイルのダウンロードを実装します

Vue は zip ファイルのダウンロードを実装します

この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。具体的な内容は次のとおりです。

エルボタン

<el-button size="mini" type="success" @click="downloadHandle(fileName, fileLocation)">ダウンロード</el-button>

js処理命令

リクエストインターセプター request.js

Axiosが導入され、axiosインスタンスが作成され、リクエストインターセプターが追加されます

'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) config.headers['cookie'] = 'Cookie値';
(3) config.headers['session'] = 'セッション値';

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはボタンをクリックしてファイルをダウンロードする機能を実装します
  • VUE でファイルをダウンロードしてステータスを確認する方法
  • Vue を使用してファイル/画像を zip で一括ダウンロードする方法のチュートリアル
  • フロントエンド Vue でファイルをダウンロードする 3 つの方法のまとめ

<<:  ubuntu20.04 LTSにdockerをインストールする方法

>>:  Windows 10にWSL2 Ubuntu20.04をインストールしてdocker環境を構築する方法

推薦する

Linux CentOS でスケジュールされたバックアップ タスクを設定する方法

実装準備 # ファイルパスをバックアップする必要があります: /opt/apollo/logs/ac...

MySQL カーディナリティ統計の簡単な分析

1. カーディナリティとは何ですか?カーディナリティとは、MySQL テーブルの列内の異なる値の数を...

静的ページと動的ページの実行メカニズムの説明

1. 静的ページとは、Web ページ内に HTML タグのみが含まれるページです。WEB 開発者がこ...

Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法

会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...

4つのファイル拡張子 .html、.htm、.shtml、.shtm の違い

ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...

MYSQL の解凍版における中国語の文字化け問題の解決方法

MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

MySQLのデッドロックとログに関する詳細な説明

最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

プロジェクトにおけるVue3のロジック抽出とフィールド表示についての簡単な説明

目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...

Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法

注: Web 開発では、フォームに autocomplete="off" を追加...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....