js spring boot implementa função simples de download de arquivos front-end e back-end

js spring boot implementa funções simples de download de arquivos front-end e back-end

2024-07-12

projeto js+boot implementa download personalizado

1. Página inicial

1. Primeiro importe o pacote js do axios

2. Preste atenção ao formato da resposta do axios:result.data.conteúdo de dados real

3. A URL solicitada aqui é a URL getMapping do seu projeto de inicialização, apenas mantenha-a consistente.

4. Se você quiser configurá-lo no backendnome do arquivo, depois que o backend for gerado, ele responderá com um campo fileName e o frontend analisará o valor.

Aqui está js anexado à páginauma etiqueta, chame o método click para realizar o salto que aciona o código.

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

1. Muitas demonstrações na Internet retornam através das configurações.Solicitar corpoEste método é implementado. Aqui está outra ideia, que é retornar um array de dados. Se estiver em outros formatos como Excel, você pode responder retornando byte de dados binários.

2. Se não houver código ASCII puro, como o chinês, você pode definir a resposta base64. Se houver codificação Unicode, lembre-se de não usar a codificação base64, caso contrário, o método front-end atob() causará caracteres ilegíveis.

3. Gson é usado aqui e, por meio de sua formatação, o mapa é convertido em uma string json e retornado ao 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. Teste de inicialização do projeto

Insira a descrição da imagem aqui
Acesso de inicialização do projeto: http://localhost:8080/toIndex

Insira a descrição da imagem aqui
Clique no botão para baixar

Ver texto txt

4. Resumo

A descrição acima é uma demonstração simples de implementação da função de download de arquivo.
Embora o front-end e o back-end não sejam desenvolvidos separadamente aqui, o conceito de design transmite dados completamente de acordo com o back-end sem processamento excessivo da visualização, o que ainda é muito valioso para referência e aprendizado.

Ignorei muitos detalhes, apenas mostrando as partes principais.
Por exemplo, o download do seu arquivo envolve download subcontratado, download segmentado de arquivos grandes, etc.
Por exemplo, generalização de formatos de download, etc.

Espero que possa ajudar a todos a resolver o problema. Por favor, dê-me muitas curtidas para ajudar o blogueiro a continuar atualizando ~
As pessoas poderosas pulverizaram levemente, foi apenas uma demonstração simples e aprenderam umas com as outras.

Compartilhamento de tecnologia