js spring boot implémente un simple téléchargement de fichiers front-end et back-end function

js spring boot implémente des fonctions simples de téléchargement de fichiers front-end et back-end

2024-07-12

Le projet js+boot implémente un téléchargement personnalisé

1. Page d'accueil

1. Importez d'abord le package js d'axios

2. Faites attention au format de la réponse axios :result.data.contenu des données réelles

3. L'URL demandée ici est l'URL getMapping de votre projet de démarrage, gardez-la simplement cohérente.

4. Si vous souhaitez le définir sur le backendnom de fichier, puis une fois le backend généré, il répondra avec un champ fileName et le frontend analysera la valeur.

Voici js ajouté à la pageUne étiquette, appelez la méthode click pour réaliser le saut déclenchant le code.

<!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. Code back-end

1. De nombreuses démos sur Internet renvoient respectivement via les paramètres.Corps de la demandeCette méthode est implémentée. Voici une autre idée, qui consiste à renvoyer un tableau de données s'il est dans d'autres formats tels qu'Excel, vous pouvez répondre en renvoyant un octet de données binaires[].

2. S'il n'y a pas de code ASCII pur tel que le chinois, vous pouvez définir la réponse base64. S'il existe un codage Unicode, n'oubliez pas de ne pas utiliser le codage base64, sinon la méthode atob() frontale entraînera des caractères tronqués.

3. Gson est utilisé ici, et grâce à son formatage, la carte est convertie en chaîne json et renvoyée au front-end.

    @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. Tests de démarrage du projet

Insérer la description de l'image ici
Accès au démarrage du projet : http://localhost:8080/toIndex

Insérer la description de l'image ici
Cliquez sur le bouton pour télécharger

Afficher le texte txt

4. Résumé

Ce qui précède est une simple démonstration d’implémentation de la fonction de téléchargement de fichiers.
Bien que le front-end et le back-end ne soient pas développés séparément ici, le concept de conception transmet complètement les données en fonction du back-end et ne fait pas trop de traitement sur la vue, ce qui reste très précieux pour la référence et l'apprentissage.

J'ai ignoré beaucoup de détails, me contentant de montrer les parties essentielles.
Par exemple, votre téléchargement de fichiers implique un téléchargement sous-traité, un téléchargement segmenté de fichiers volumineux, etc.
Par exemple, généralisation des formats de téléchargement, etc.

J'espère que cela pourra aider tout le monde à résoudre le problème. S'il vous plaît, donnez-moi beaucoup de likes pour aider le blogueur à continuer à mettre à jour ~
Les puissants ont légèrement pulvérisé, ce n'était qu'une simple démo, et ils ont appris les uns des autres.

Partage de technologie