Node.js 스프링 부트는 간단한 프런트엔드 및 백엔드 파일 다운로드 기능을 구현합니다.

2024-07-12

js+boot 프로젝트는 맞춤형 다운로드를 구현합니다.

1. 프런트엔드 페이지

1. 먼저 axios의 js 패키지를 가져옵니다.

2. Axios 응답 형식에 주의하세요.result.data.실제 데이터 콘텐츠

3. 여기서 요청한 URL은 부팅 프로젝트의 getMapping URL이므로 일관성을 유지하세요.

4. 백엔드에 설정하고 싶은 경우파일 이름, 백엔드가 생성된 후 fileName 필드로 응답하고 프런트엔드가 값을 구문 분석합니다.

다음은 페이지에 js가 추가된 것입니다.태그, click 메소드를 호출하여 점프를 트리거하는 코드를 실현합니다.

<!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. 백엔드 코드

1. 인터넷의 많은 데모는 설정을 통해 응답을 반환합니다.요청 본문이 메서드는 데이터 배열을 반환하는 또 다른 아이디어입니다. Excel과 같은 다른 형식인 경우 이진 데이터 byte[]를 반환하여 응답할 수 있습니다.

2. 중국어와 같은 순수 ASCII 코드가 없는 경우 base64 응답을 설정할 수 있습니다. 유니코드 인코딩이 있는 경우 base64 인코딩을 사용하지 마십시오. 그렇지 않으면 프런트 엔드 atob() 메서드에서 문자가 깨질 수 있습니다.

3. 여기서는 Gson을 사용하며, 해당 형식을 통해 맵이 json 문자열로 변환되어 프런트 엔드로 반환됩니다.

    @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