js spring boot mengimplementasikan fungsi pengunduhan file front-end dan back-end yang sederhana

2024-07-12

proyek js+boot mengimplementasikan pengunduhan yang disesuaikan

1. Halaman depan

1. Impor terlebih dahulu paket js dari axios

2. Perhatikan format aksio respon:result.data.konten data nyata

3. URL yang diminta di sini adalah URL getMapping dari proyek boot Anda, jaga agar tetap konsisten.

4. Jika ingin mengaturnya di backendnama file, lalu setelah backend dibuat, backend akan merespons dengan kolom fileName dan frontend akan mengurai nilainya.

Ini js yang ditambahkan ke halamansebuah tanda, panggil metode klik untuk mewujudkan kode yang memicu lompatan.

<!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. Kode bagian belakang

1. Banyak demo di Internet mengembalikan respons melalui pengaturan.Permintaan tubuhMetode ini diterapkan. Berikut ide lainnya, yaitu mengembalikan array data. Jika dalam format lain seperti excel, Anda dapat merespons dengan mengembalikan data biner byte[].

2. Jika tidak ada kode ASCII murni seperti bahasa Mandarin, Anda dapat mengatur respons base64. Jika ada pengkodean Unicode, ingatlah untuk tidak menggunakan pengkodean base64, jika tidak, metode atob() front-end akan menyebabkan karakter kacau.

3. Gson digunakan di sini, dan melalui pemformatannya, peta diubah menjadi string json dan dikembalikan ke ujung depan.

    @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. Pengujian startup proyek

Masukkan deskripsi gambar di sini
Akses permulaan proyek: http://localhost:8080/toIndex

Masukkan deskripsi gambar di sini
Klik tombol untuk mengunduh

Lihat teks txt

4. Ringkasan

Di atas adalah demo implementasi sederhana dari fungsi pengunduhan file.
Meskipun front-end dan back-end tidak dikembangkan secara terpisah di sini, konsep desain sepenuhnya mentransmisikan data sesuai dengan back-end dan tidak melakukan terlalu banyak pemrosesan pada tampilan, yang masih sangat berharga untuk referensi dan pembelajaran.

Saya mengabaikan banyak detail, hanya menunjukkan bagian intinya.
Misalnya, pengunduhan file Anda melibatkan pengunduhan subkontrak, pengunduhan file besar yang tersegmentasi, dll.
Misalnya, generalisasi format unduhan, dll.

Saya harap ini dapat membantu semua orang menyelesaikan masalah. Tolong beri saya banyak suka untuk membantu blogger terus memperbarui~
Orang-orang kuat menyemprot dengan ringan, itu hanya demo sederhana, dan mereka belajar satu sama lain.

Berbagi teknologi