Un moyen simple de télécharger des fichiers de manière asynchrone avec Ajax

L'arrière-plan de gestion doit télécharger des rapports de données à tout moment, et les données doivent être générées en temps réel puis converties en Excel pour le téléchargement. Comment résoudre ce problème ? L'éditeur ci-dessous partagera avec vous une méthode simple pour traiter le flux binaire de requête Ajax (téléchargement asynchrone de fichiers ajax). J'espère que cela pourra vous aider.

Résumé : ajax demande un flux binaire (fichier), le convertit en Blob pour le traitement ou le téléchargement et enregistre le fichier

Exigences

L'arrière-plan de gestion doit télécharger des rapports de données à tout moment, et les données doivent être en temps réel. Après génération, elles sont converties en Excel pour le téléchargement.

Le fichier n'est pas volumineux et le bouton "Exporter" est placé sur la page. Après avoir cliqué sur le bouton, une boîte de dialogue de sauvegarde du fichier apparaît pour enregistrer

Explication : La première méthode peut. Répondez directement aux besoins de la plupart des gens en utilisant la balise a. Les deux méthodes concernent uniquement les méthodes d'implémentation et une meilleure expérience de fonctionnement. Elles ne sont pas nécessaires (pour donner un exemple qui nécessite la deuxième méthode : si la génération est très lente, vous en avez besoin). pour désactiver le bouton pendant le processus de génération pour empêcher la génération continue). Vous ne pouvez pas l'utiliser si vous l'utilisez. Voir

Solution

Méthode 1

Si l'interface pour. les fichiers demandés peuvent être modifiés en GET, vous pouvez utiliser cette méthode

<a class="btn btn-primary btn-xs" download="data.xlsx" href="download/?filename=aaa.txt" rel="external nofollow" ><i class="fa fa-share-square-o fa-lg"></i> 导出</a>

ou la remplacer par une autre Méthode, utilisez js pour créer dynamiquement une balise

<button type="button" onclick="download()">导出</button>
function download() {
  var a = document.createElement('a');
  var url = 'download/?filename=aaa.txt';
  var filename = 'data.xlsx';
  a.href=url;
  a.download = filename;
  a.click()
 }

Inconvénients

Impossible d'utiliser la méthode de publication

Impossible de désactiver le bouton lors du démarrage du téléchargement et d'activer le bouton une fois le téléchargement terminé

Méthode 2

Beaucoup de gens disent que la première méthode est satisfaisante. Mauvaise façon

Méthode conventionnelle, utilisez jquery :

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  $.get(url, function (data) {
    console.log(typeof(data))
    blob = new Blob([data])
    var a = document.createElement('a');
    a.download = 'data.xlsx';
    a.href=window.URL.createObjectURL(blob)
    a.click()
  })
}

Enregistrez de cette manière Le fichier ne peut pas être ouvert. Console.log(typeof(data)) verra. qu'il est de type chaîne. La raison en est que jquery convertit les données renvoyées en chaîne et ne prend pas en charge le type blob.

Voie correcte

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
  xhr.responseType = "blob";  // 返回类型blob
  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
      // 返回200
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
      reader.onload = function (e) {
        // 转换完成，创建一个a标签用于下载
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

Recommandations associées :

Quatre étapes pour qu'Ajax envoie des requêtes asynchrones

Explication détaillée du plug-in de téléchargement asynchrone ajax fileupload

Analyse d'un exemple de fonction de file d'attente de fonction asynchrone JS

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!