js spring boot implementa il semplice download di file front-end e back-end function

js spring boot implementa semplici funzioni di download di file front-end e back-end

2024-07-12

Il progetto js+boot implementa il download personalizzato

1. Pagina front-end

1. Per prima cosa importa il pacchetto js di axios

2. Prestare attenzione al formato della risposta di axios:result.data.contenuto di dati reali

3. L'URL richiesto qui è l'URL getMapping del tuo progetto di avvio, mantienilo coerente.

4. Se vuoi impostarlo sul backendnome del file, quindi dopo che il backend è stato generato, risponderà con un campo fileName e il frontend analizzerà il valore.

Ecco js aggiunto alla paginaun tag, chiama il metodo click per realizzare il salto di attivazione del codice.

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

1. Molte demo su Internet restituiscono la risposta tramite le impostazioni.Richiedi corpoQuesto metodo è implementato. Ecco un'altra idea, ovvero restituire un array di dati. Se è in altri formati come Excel, puoi rispondere restituendo byte di dati binari[].

2. Se non è presente un codice ASCII puro come il cinese, è possibile impostare la risposta base64. Se è presente la codifica Unicode, ricordarsi di non utilizzare la codifica base64, altrimenti il metodo atob() del front-end causerà caratteri confusi.

3. Qui viene utilizzato Gson e, attraverso la sua formattazione, la mappa viene convertita in una stringa json e restituita al 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. Test di avvio del progetto

Inserisci qui la descrizione dell'immagine
Accesso all'avvio del progetto: http://localhost:8080/toIndex

Inserisci qui la descrizione dell'immagine
Fare clic sul pulsante per scaricare

Visualizza il testo txt

4. Riepilogo

Quanto sopra è una semplice demo di implementazione della funzione di download dei file.
Sebbene il front-end e il back-end qui non siano sviluppati separatamente, il concetto di design trasmette completamente i dati in base al back-end senza un'elaborazione eccessiva della vista, il che è comunque molto prezioso per la consultazione e l'apprendimento.

Ho ignorato molti dettagli, mostrando solo le parti principali.
Ad esempio, il download del file prevede download in subappalto, download segmentato di file di grandi dimensioni, ecc.
Ad esempio, la generalizzazione dei formati di download, ecc.

Spero che possa aiutare tutti a risolvere il problema. Per favore, dammi molti Mi piace per aiutare il blogger a continuare ad aggiornare ~
Le persone potenti hanno spruzzato leggermente, era solo una semplice dimostrazione e hanno imparato gli uni dagli altri.

Condivisione della tecnologia