Utilisation d'axios pour gérer le téléchargement de fichiers au lieu de $.ajax

Problématique

Lors de l'utilisation de requêtes AJAX pour télécharger un fichier depuis un serveur, la réponse est souvent interprétée comme une chaîne de caractères par jQuery, ce qui empêche un téléchargement correct. Pour contourner ce problème, on peut recourir à la bibliothèque axios qui offre un contrôle plus précis sur le type de réponse.

Exemple côté client avec axios

Le code suivant illustre une requête POST utilisant axios pour récupérer un fichier Excel et initier son téléchargement. Le paramètre responseType est défini sur 'blob' pour traiter la réponse comme un objet binaire.


document.getElementById('exportButton').addEventListener('click', function() {
    const searchData = {
        criteria: 'vehicule',
        filters: ['type', 'status']
    };

    axios.post('/api/export/vehicles', JSON.stringify(searchData), {
        headers: {
            'Content-Type': 'application/json'
        },
        responseType: 'blob'
    })
    .then(response => {
        const blobData = new Blob([response.data]);
        const anchorLink = document.createElement('a');
        const objectUrl = URL.createObjectURL(blobData);

        anchorLink.href = objectUrl;
        anchorLink.download = 'vehicules.xlsx';
        document.body.appendChild(anchorLink);
        anchorLink.click();
        document.body.removeChild(anchorLink);
        URL.revokeObjectURL(objectUrl);
    })
    .catch(error => {
        console.error('Erreur lors du téléchargement:', error);
    });
});

Implémentation côté serveur avec Spring Boot

Le contrôleur Spring Boot suivant génère un fichier Excel à l'aide de la bibliothèque Apache POI et l'envoie dans la réponse HTTP. La méthode setResponseHeaders configure les en-têtes pour indiquer un téléchargement de fichier.


package com.example.controller;

import java.io.OutputStream;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.apache.poi.ss.usermodel.Workbook;
import org.springframework.web.bind.annotation.*;
import com.example.util.ExcelGenerator;
import com.example.dto.ExportRequest;

@RestController
@RequestMapping("/api/export")
public class ExportController {

    @PostMapping("/vehicles")
    public void exportVehicles(@RequestBody ExportRequest request, HttpServletResponse response) {
        String fileName = request.getFileName() + ".xlsx";
        List<Map<String, Object>> data = fetchData(request);
        String[] columnNames = {"ID", "Immatriculation", "Propriétaire", "Date Mise en Service"};

        Workbook workbook = ExcelGenerator.createWorkbook("Véhicules", columnNames, data);

        try {
            setResponseHeaders(response, fileName);
            OutputStream outputStream = response.getOutputStream();
            workbook.write(outputStream);
            outputStream.flush();
            outputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void setResponseHeaders(HttpServletResponse response, String fileName) {
        response.setContentType("application/octet-stream");
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
    }
}

Utilitaire pour la génération Excel

La classe ExcelGenerator simplifie la création de fichiers Excel avec Apache POI. Elle prend un nom de feuille, les noms de colonnes et les données sous forme de liste de cartes.


package com.example.util;

import java.util.List;
import java.util.Map;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.*;

public class ExcelGenerator {

    public static Workbook createWorkbook(String sheetName, String[] columns, List<Map<String, Object>> data) {
        Workbook workbook = new HSSFWorkbook();
        Sheet sheet = workbook.createSheet(sheetName);

        // Création de l'en-tête
        Row headerRow = sheet.createRow(0);
        CellStyle style = workbook.createCellStyle();
        style.setAlignment(HorizontalAlignment.CENTER);
        for (int i = 0; i < columns.length; i++) {
            Cell cell = headerRow.createCell(i);
            cell.setCellValue(columns[i]);
            cell.setCellStyle(style);
        }

        // Remplissage des données
        for (int i = 0; i < data.size(); i++) {
            Row dataRow = sheet.createRow(i + 1);
            Map<String, Object> rowData = data.get(i);
            for (int j = 0; j < columns.length; j++) {
                Object value = rowData.get(columns[j]);
                dataRow.createCell(j).setCellValue(value != null ? value.toString() : "");
            }
        }
        return workbook;
    }
}

Considérations supplémentaires

Pour les appplications plus complexes, il est possible d'étendre cette logique en ajoutant des styles personnalisés ou en gérant différents formats de fichiesr. Assurez-vous que les dépendances nécessaires (axios, Apache POI) sont correctement incluses dans votre projet.

Étiquettes: axios jQuery Spring Boot Apache POI téléchargement de fichiers

Publié le 18 juin à 16h03