Το js spring boot υλοποιεί απλή λήψη αρχείων front-end και back-end function

Το js spring boot υλοποιεί απλές λειτουργίες λήψης αρχείων front-end και back-end

2024-07-12

Το έργο js+boot υλοποιεί προσαρμοσμένη λήψη

1. Αρχική σελίδα

1. Πρώτα εισάγετε το πακέτο js του axios

2. Δώστε προσοχή στη μορφή της απάντησης axios:result.data.πραγματικό περιεχόμενο δεδομένων

3. Η διεύθυνση URL που ζητείται εδώ είναι η διεύθυνση URL getMapping του έργου εκκίνησης, απλώς διατηρήστε τη συνεπή.

4. Εάν θέλετε να το ρυθμίσετε στο backendόνομα αρχείου, στη συνέχεια, αφού δημιουργηθεί το backend, θα ανταποκριθεί με ένα πεδίο fileName και το frontend θα αναλύσει την τιμή.

Εδώ επισυνάπτεται το js στη σελίδαμια ετικέτα, καλέστε τη μέθοδο κλικ για να συνειδητοποιήσετε το άλμα ενεργοποίησης του κώδικα.

<!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 Εάν υπάρχει κωδικοποίηση Unicode, θυμηθείτε να μην χρησιμοποιήσετε την κωδικοποίηση base64, διαφορετικά η μέθοδος atob() του front-end θα προκαλέσει αλλοιωμένους χαρακτήρες.

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

2. Δοκιμές εκκίνησης έργου

Εισαγάγετε την περιγραφή της εικόνας εδώ
Πρόσβαση εκκίνησης έργου: http://localhost:8080/toIndex

Εισαγάγετε την περιγραφή της εικόνας εδώ
Κάντε κλικ στο κουμπί για λήψη

Προβολή κειμένου txt

4. Περίληψη

Το παραπάνω είναι ένα απλό demo υλοποίησης της λειτουργίας λήψης αρχείου.
Παρόλο που το front-end και το back-end δεν αναπτύσσονται ξεχωριστά εδώ, η σχεδιαστική ιδέα μεταδίδει πλήρως δεδομένα σύμφωνα με το back-end χωρίς υπερβολική επεξεργασία της προβολής, κάτι που εξακολουθεί να είναι πολύτιμο για αναφορά και εκμάθηση.

Έχω αγνοήσει πολλές λεπτομέρειες, δείχνοντας απλώς τα βασικά μέρη.
Για παράδειγμα, η λήψη του αρχείου σας περιλαμβάνει λήψη με υπεργολαβία, τμηματοποιημένη λήψη μεγάλων αρχείων κ.λπ.
Για παράδειγμα, γενίκευση μορφών λήψης κ.λπ.

Ελπίζω ότι μπορεί να βοηθήσει όλους να λύσουν το πρόβλημα, παρακαλώ δώστε μου πολλά likes για να βοηθήσω τον blogger να συνεχίσει να ενημερώνεται
Οι ισχυροί ψέκασαν ελαφρά, ήταν απλώς ένα απλό demo, και έμαθαν ο ένας από τον άλλον.

Κοινή χρήση τεχνολογίας