技術共有

js Spring Boot は、単純なフロントエンドおよびバックエンドのファイル ダウンロード機能を実装します。

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

js+boot プロジェクトはカスタマイズされたダウンロードを実装します

1. フロントエンドページ

1.まずaxiosのjsパッケージをインポートします

2. axios 応答の形式に注意してください。result.data.実際のデータの内容

3. ここで要求される URL はブート プロジェクトの getMapping URL です。一貫性を保ってください。

4.バックエンドに設定したい場合ファイル名、バックエンドが生成された後、fileName フィールドで応答し、フロントエンドが値を解析します。

ページに追加されたjsは次のとおりですタグ、 click メソッドを呼び出して、ジャンプをトリガーするコードを実現します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
</head>
<body>
<h2>模拟下载</h2>
<button onclick="downloading()">Click me</button>
</body>
<script>
    async function downloading() {
        const result = await axios.get('http://localhost:8080/download');
        console.log(result.data)
        if (result.data.code === 200) {
            const blob = new Blob([result.data.data], {type: 'text/plain;charset=utf-8'});
            const link = document.createElement('a')
            link.style.display = 'none'
            const url = URL.createObjectURL(blob)
            link.href = url
            link.download = '文件名.txt'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            URL.revokeObjectURL(url)
        } else {
            alert("下载失败！")
        }
    }

</script>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

2. バックエンドコード

1. インターネット上の多くのデモは、設定を通じて応答を返します。リクエストボディこのメソッドは、Excel などの他の形式のデータ配列を返すという別のアイデアで実装されています。バイナリ データ byte[] を返すことができます。

2. 中国語などの純粋な ASCII コードがない場合、Unicode エンコーディングがある場合は、base64 エンコーディングを使用しないように注意してください。そうしないと、フロントエンドの atob() メソッドで文字化けが発生します。

3. ここでは Gson が使用されており、そのフォーマットを通じてマップが json 文字列に変換され、フロントエンドに返されます。

    @GetMapping("/download")
    @ResponseBody
    public String downloadFile() {

        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 500; i++) {
            sb.append("模拟一条数据").append(i).append("n");
        }

        Map<String, Object> resultMap = new HashMap<>(6);
        resultMap.put("code", 200);
        resultMap.put("data", sb.toString());

        return gson.toJson(resultMap);
    }



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

2. プロジェクト立ち上げテスト

ここに画像の説明を挿入します
プロジェクト起動アクセス: http://localhost:8080/toIndex

ここに画像の説明を挿入します
ボタンをクリックしてダウンロードしてください
ここに画像の説明を挿入します
テキストテキストを表示
ここに画像の説明を挿入します

4. まとめ

上記はファイルダウンロード機能の簡単な実装デモです。
ここではフロントエンドとバックエンドは別々に開発されていませんが、設計コンセプトは完全にバックエンドに従ってデータを送信し、ビュー上であまり多くの処理を行わないため、参照と学習にとって非常に価値があります。

多くの詳細を無視して、核心部分だけを示しました。
たとえば、ファイルのダウンロードには、下請けのダウンロード、大きなファイルの分割されたダウンロードなどが含まれます。
例えば、ダウンロード形式の汎用化など。

皆さんの問題解決に役立てば幸いです。ブロガーが更新を続けるためにたくさんの「いいね！」をお願いします。
力のある人たちが軽くスプレーするだけの簡単なデモで、お互いに学び合いました。

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、Java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便