web-dev-qa-db-fra.com

Téléchargement du fichier Excel xlsx dans Angularjs et WebApi


Je travaille sur une tâche dans laquelle je dois télécharger un rapport au format xlsx. Le fichier de rapport est généré avec succès depuis le serveur et est également reçu côté client. Mais cela n’ouvre pas et ne produit pas d’erreur de format invalide.

Ci-dessous le code du côté serveur.

var output = await reportObj.GetExcelData(rParams);
    if (output != null){
        var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(output.ConentBytes)
        };
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = output.FileName
        };
 return result;
 }


Voici le code pour le côté client:

        var saveData = function (response) {

        if (response.status === 200) {
            var reportData = response.data;

            var b = new Blob([reportData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
            saveAs(b,"ReportFile.xlsx");//this is FileSaver.js function
        } else {
            console.log(response.statusText);
        }

    };


    $scope.getExcelFile = function(reportName, reportParams) {

        reportDataService.getExcelReportData(reportName, reportParams, saveData);

    }


Ci-dessous le message d'erreur:
Excel n'a pas pu ouvrir newFile.xlsx car certains contenus sont illisibles. Voulez-vous ouvrir et réparer ce classeur?

En cliquant sur réparer, l'erreur suivante apparaît: Excel ne peut pas ouvrir ce fichier.
Le format ou l'extension du fichier n'est pas valide. Vérifiez que le fichier n'a pas été corrompu et que l'extension du fichier correspond au format du fichier .

Quelqu'un peut-il me guider ce que je fais mal? Pendant ce temps, les mêmes objets générateurs de fichiers côté serveur fonctionnent sans à-coup dans l'application de formulaires ASP.Net et le fichier s'ouvre également sans erreur .
Je vous remercie.

javascriptc#angularjsexcelasp.net-web-api
13
Nadeem Jamali

Je suppose que votre appel $http manque de la configuration du type de réponse. Voici comment je télécharge des fichiers bureautiques:

function download(url, defaultFileName) {
    var self = this;
    var deferred = $q.defer();
    $http.get(url, { responseType: "arraybuffer" }).then(
        function (data, status, headers) {
            var type = headers('Content-Type');
            var disposition = headers('Content-Disposition');
            if (disposition) {
                var match = disposition.match(/.*filename=\"?([^;\"]+)\"?.*/);
                if (match[1])
                    defaultFileName = match[1];
            }
            defaultFileName = defaultFileName.replace(/[<>:"\/\\|?*]+/g, '_');
            var blob = new Blob([data], { type: type });
            saveAs(blob, defaultFileName);
            deferred.resolve(defaultFileName);                    
        }, function (data, status) {
            var e = /* error */
            deferred.reject(e);
        });
    return deferred.promise;
}
36
hansmaad

Vous avez juste besoin de faire une chose seulement que ..... inclure les js suivants pour sauvegarder le fichier localement. Téléchargez-le à partir de " https://github.com/eligrey/FileSaver.js/ " Vos données de réponse doivent être en type blob.

Je l'ai mis en place et ça marche.

function downloadfile(url,defaultFileName){
  var self = this;
    var deferred = $q.defer();
    $http.get(url, { responseType: "blob" }).then(
       function (data){
          saveAs(data.data, defaultFileName)
          deferred.resolve(defaultFileName);                    
        }, function (data) {
           var e = /* error */
            deferred.reject(e);
        });
        return deferred.promise;
}
2
Pradeep Korriya

Je faisais face à la même erreur, le contenu était au format hexa. J'ai donc ajouté un type de réponse comme arraybuffer, le problème a été résolu. s'il vous plaît voir ci-dessous.

$http({
    url: '/api/sendPMOToBackendUpdate',
    method: "POST",
    headers: {'Content-type': 'application/json'},
    data: backendTsData,
    responseType: 'arraybuffer'
}).success(function(data, status, headers){
    var file = new Blob([ data ], { type : 'application/vnd.ms-Excel'});
    var defaultFileName ="TSC-"+$scope.user.name+"-"+$scope.user.ohrId+".xls";
    saveAs(file,defaultFileName);
}).error(function(err) {
    console.log('Error: ' + err);
});
0
Mithun Kumar

J'ai rencontré un problème similaire lors de l'écriture d'Excel avec la bibliothèque Javascript Excel Builder. À la fin, j'ai découvert que la raison était qu'un caractère de contrôle '\ u001a' était inclus dans les données. 

La solution consiste à encoder le caractère de contrôle à la manière d'Excel comme '_x001a_'. 

Voici comment j'ai diagnostiqué le problème: 

Le fichier .xlsx est juste un fichier XML compressé. Vous pouvez l'ouvrir avec 7-Zip. Dans le dossier xl/ se trouve un fichier sharedString.xml contenant toutes les chaînes. Extrayez le fichier et ouvrez-le avec Notepad ++. Si vous voyez un caractère de contrôle, il pourrait en être la cause. 

0
gm2008