js spring boot implementa una función simple de descarga de archivos de front-end y back-end

js spring boot implementa funciones simples de descarga de archivos de front-end y back-end

2024-07-12

El proyecto js + boot implementa una descarga personalizada

1. Página de inicio

1. Primero importe el paquete js de axios

2. Preste atención al formato de la respuesta de axios:result.data.contenido de datos reales

3. La URL solicitada aquí es la URL getMapping de su proyecto de inicio, solo manténgala consistente.

4. Si quieres configurarlo en el backendNombre del archivo, luego de generar el backend, responderá con un campo fileName y el frontend analizará el valor.

Aquí está js adjunto a la página.una etiqueta, Llame al método de clic para realizar el código que activa el salto.

<!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. Código de fondo

1. Muchas demostraciones en Internet regresan a través de la configuración.Cuerpo de la solicitudEste método se implementa. Aquí hay otra idea, que es devolver una matriz de datos. Si está en otros formatos como Excel, puede responder devolviendo un byte de datos binarios.

2. Si no hay un código ASCII puro como el chino, puede configurar la respuesta base64. Si hay codificación Unicode, recuerde no usar la codificación base64; de lo contrario, el método atob() del front-end provocará caracteres confusos.

3. Aquí se usa Gson y, a través de su formato, el mapa se convierte en una cadena json y se devuelve 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. Pruebas de inicio del proyecto

Insertar descripción de la imagen aquí
Acceso de inicio del proyecto: http://localhost:8080/toIndex

Insertar descripción de la imagen aquí
Haga clic en el botón para descargar

Ver texto

4. Resumen

Lo anterior es una demostración de implementación simple de la función de descarga de archivos.
Aunque el front-end y el back-end no se desarrollan aquí por separado, el concepto de diseño transmite datos completamente de acuerdo con el back-end sin un procesamiento excesivo de la vista, lo que sigue siendo muy valioso para referencia y aprendizaje.

He ignorado muchos detalles y solo he mostrado las partes principales.
Por ejemplo, la descarga de archivos implica la descarga subcontratada, la descarga segmentada de archivos grandes, etc.
Por ejemplo, generalización de formatos de descarga, etc.

Espero que pueda ayudar a todos a resolver el problema. Dame muchos Me gusta para ayudar al blogger a continuar actualizando ~.
Las personas poderosas rociaron ligeramente, fue solo una demostración simple y aprendieron unos de otros.

Compartir tecnología