Comment utiliser AngularJS pour implémenter la fonction de téléchargement de fichiers Excel

Cet article présente principalement la fonction d'AngularJS pour télécharger le fichier Excel généré par php sur la base d'une requête http. Il analyse la requête http AngularJS et le téléchargement de fichiers ainsi que d'autres compétences opérationnelles connexes sous forme d'exemples.

L'exemple de cet article décrit comment AngularJS implémente la fonction de téléchargement de fichiers Excel générés par php sur la base de requêtes http. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

Les étudiants qui utilisent le plug-in PHPExcel savent que l'exportation d'Excel modifie directement le type de contenu du contenu généré pour télécharger le contenu sous forme de fichier. À ce moment-là, il doit y avoir quelque chose sur la page. Une URL à télécharger en cliquant.

Ensuite, la question est, s'il y a des paramètres de requête lors de la génération d'Excel, ils ne peuvent être demandés que via une requête http js. Comment le télécharger en ce moment ?

Après quelques recherches, il existe plusieurs façons :

1. Angularjs crée une balise pour simuler le téléchargement

// 创建a标签模拟下载
function exportExcel(params, filename) {
  return $http({
    url: '/api/exportExcel',
    method: "POST",
    headers: {
      'Content-type': 'application/json'
    },
    params: params,
    responseType: 'arraybuffer'
  }).success(function (data) {
    var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    var objectUrl = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', filename);
    a.click();
    URL.revokeObjectURL(objectUrl);
  });
}

Dans cette méthode, veuillez noter que si vous transférez un fichier xls, c'est-à-dire un fichier excel5, le type doit être défini sur

application/vnd.ms-excel ou application/x- exceller.

2. js génère une URL à partir des paramètres de la requête, crée une balise

// 生成下载url
$scope.data.down_url = "../c_potential/get_excel?end_time="+$scope.end_date+"&liable="+liable+"&nickname="+$scope.data.nickname+"&province="+$scope.data.province_cur+"&start_time="+$scope.start_date;

puis lie l'URL à une balise a. , cette méthode convient aux situations avec moins de paramètres et les données ne seront pas traitées deux fois, ce qui rend les erreurs moins susceptibles de se produire. Le seul inconvénient est qu'elles doivent être traitées deux fois, un pour la génération et un pour la génération. écrivez les paramètres dans l'URL. Le deuxième bouton consiste à télécharger Excel. Bien que l'utilisateur opère deux fois, une seule requête http se produit réellement, ce qui n'affecte pas les performances.

3. Générez d'abord puis téléchargez

La troisième méthode est similaire à la seconde, générez d'abord le fichier Excel, enregistrez-le dans le serveur, puis téléchargez-le. Cela implique des E/S disque, les performances sont donc relativement faibles. Cette méthode n'est pas recommandée. Elle est simplement enregistrée en tant que méthode.

La méthode de téléchargement simulé par Angularjs est la plus pratique, mais des erreurs peuvent survenir. La deuxième méthode est la plus sûre.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment compiler, empaqueter et afficher des fichiers d'index dans vue

Comment utiliser le modèle Jade dans vue

Passer le modèle au composant dans Angular

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!