js spring boot सरलं अग्रे-अन्तं पृष्ठ-अन्तं च सञ्चिकां डाउनलोड् function

js spring boot सरलं अग्रे-अन्तं पृष्ठ-अन्तं च सञ्चिका-अवलोकन-कार्यं कार्यान्वयति

2024-07-12

js+boot परियोजना अनुकूलितं डाउनलोड् कार्यान्वितं करोति

1. अग्रभागः पृष्ठः

1. प्रथमं axios इत्यस्य js संकुलं आयातयन्तु

2. अक्षीयप्रतिक्रियायाः प्रारूपे ध्यानं ददातु : १.result.data.वास्तविकदत्तांशसामग्री

3. अत्र अनुरोधितं URL भवतः बूट् परियोजनायाः getMapping URL अस्ति, केवलं तत् सुसंगतं स्थापयन्तु ।

4. यदि भवान् पृष्ठभागे सेट् कर्तुम् इच्छतिसञ्चिकानाम, ततः पृष्ठभागस्य जननानन्तरं fileName क्षेत्रेण प्रतिक्रियां दास्यति तथा च अग्रभागः मूल्यं विश्लेषयिष्यति ।

अत्र पृष्ठे js संलग्नम् अस्तिa tag, कूर्दनं प्रेरयति इति कोडं साक्षात्कर्तुं क्लिक् मेथड् आह्वयन्तु ।

<!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. अन्तर्जालस्य बहवः प्रदर्शनाः सेटिंग्स् माध्यमेन resp प्रेषयन्ति।निवेदन शरीरइयं विधिः कार्यान्वितः अस्ति, यत् अन्येषु प्रारूपेषु यथा excel इत्यत्र भवति तर्हि भवान् द्विचक्रीयदत्तांशबाइट्[] प्रत्यागन्तुं शक्नोति ।

2. यदि चीनी इत्यादिः शुद्धः ASCII कोडः नास्ति तर्हि भवान् base64 प्रतिक्रियां सेट् कर्तुं शक्नोति यदि Unicode एन्कोडिंग् अस्ति तर्हि base64 एन्कोडिंग् इत्यस्य उपयोगं न कर्तव्यम् इति स्मर्यताम्, अन्यथा front-end 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

2. परियोजना प्रारम्भपरीक्षणम्

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु
परियोजनाप्रारम्भप्रवेशः: http://localhost:8080/toIndex

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु
डाउनलोड् कर्तुं बटनं नुदन्तु

txt पाठं पश्यन्तु

4. सारांशः

उपरिष्टात् सञ्चिका-अवलोकन-कार्यस्य सरलं कार्यान्वयन-प्रदर्शनम् अस्ति ।
यद्यपि अत्र अग्रभागः पृष्ठभागः च पृथक् न विकसिताः, तथापि डिजाइन-अवधारणा दृश्यस्य अत्यधिकं संसाधनं विना पृष्ठ-अन्त-अनुसारं पूर्णतया दत्तांशं प्रसारयति, यत् अद्यापि सन्दर्भाय, शिक्षणाय च अतीव मूल्यवान् अस्ति

मया बहुविवरणानि उपेक्षितानि, केवलं मूलभागाः दर्शयित्वा।
यथा, भवतः सञ्चिका-अवलोकनं उपठेकेदार-अवलोकनम्, बृहत्-सञ्चिकानां खण्डित-अवलोकनम् इत्यादयः सन्ति ।
यथा - डाउनलोड् प्रारूपानाम् सामान्यीकरणम् इत्यादि ।

आशासे यत् सर्वेषां समस्यायाः समाधानं कर्तुं साहाय्यं कर्तुं शक्नोति कृपया ब्लोगरस्य अपडेट् निरन्तरं कर्तुं साहाय्यं कर्तुं बहु पसन्दं ददातु~
शक्तिशालिनः जनाः लघुतया सिञ्चन्ति स्म, केवलं सरलः प्रदर्शनः आसीत्, ते च परस्परं शिक्षन्ति स्म ।

प्रौद्योगिकी साझेदारी