js Spring Boot implementiert die einfache Funktion zum Herunterladen von Front-End- und Back-End-Dateien

js Spring Boot implementiert einfache Front-End- und Back-End-Funktionen zum Herunterladen von Dateien

2024-07-12

Das js+boot-Projekt implementiert einen benutzerdefinierten Download

1. Frontend-Seite

1. Importieren Sie zuerst das js-Paket von axios

2. Achten Sie auf das Format der Axios-Antwort:result.data.echter Dateninhalt

3. Die hier angeforderte URL ist die getMapping-URL Ihres Boot-Projekts. Halten Sie sie einfach konsistent.

4. Wenn Sie es im Backend festlegen möchtenDateiname, dann antwortet das Backend nach der Generierung mit einem fileName-Feld und das Frontend analysiert den Wert.

Hier ist js an die Seite angehängteine MarkierungRufen Sie die Click-Methode auf, um den Code zu realisieren, der den Sprung auslöst.

<!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. Back-End-Code

1. Viele Demos im Internet kehren bzw. durch Einstellungen zurück.AnforderungstextHier ist eine weitere Idee, die darin besteht, ein Datenarray in anderen Formaten wie Excel zurückzugeben, indem Sie ein binäres Datenbyte[] zurückgeben.

2. Wenn kein reiner ASCII-Code wie Chinesisch vorhanden ist, können Sie die Base64-Antwort festlegen. Wenn eine Unicode-Codierung vorhanden ist, denken Sie daran, keine Base64-Codierung zu verwenden, da die Front-End-Methode atob () sonst verstümmelte Zeichen verursacht.

3. Hier wird Gson verwendet. Durch seine Formatierung wird die Karte in einen JSON-String konvertiert und an das Frontend zurückgegeben.

    @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. Testen des Projektstarts

Fügen Sie hier eine Bildbeschreibung ein
Projektstartzugriff: http://localhost:8080/toIndex

Fügen Sie hier eine Bildbeschreibung ein
Klicken Sie zum Herunterladen auf die Schaltfläche

TXT-Text anzeigen

4. Zusammenfassung

Das Obige ist eine einfache Implementierungsdemo der Datei-Download-Funktion.
Obwohl Front-End und Back-End hier nicht separat entwickelt werden, überträgt das Designkonzept die Daten vollständig entsprechend dem Back-End, ohne dass die Ansicht übermäßig verarbeitet wird, was für Referenz- und Lernzwecke dennoch sehr wertvoll ist.

Ich habe viele Details ignoriert und nur die Kernteile gezeigt.
Ihr Datei-Download umfasst beispielsweise das Herunterladen von Unteraufträgen, das segmentierte Herunterladen großer Dateien usw.
Zum Beispiel Verallgemeinerung von Downloadformaten usw.

Ich hoffe, es kann allen helfen, das Problem zu lösen. Bitte geben Sie mir viele „Gefällt mir“-Angaben, um dem Blogger beim weiteren Aktualisieren zu helfen
Die mächtigen Leute sprühten leicht, es war nur eine einfache Demo und sie lernten voneinander.

Technologieaustausch