Ajax demande un flux binaire pour le traitement (fichier de téléchargement asynchrone ajax)

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

Exigences

Le la gestion doit être effectuée à tout moment Téléchargez le rapport de données Les données doivent être générées en temps réel puis 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

L'interface de demande de fichiers peut être modifiée 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 changer d'une autre manière et utiliser js pour dynamiquement. créer un tag

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

Inconvénients

Impossible d'utiliser la méthode post

Impossible de désactiver le bouton au démarrage du téléchargement et activez le bouton une fois le téléchargement terminé

Méthode 2

Beaucoup de gens le font. On dit que la première méthode est satisfaisante La mauvaise façon est <🎜. >

la méthode conventionnelle, en utilisant jquery :

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

Les fichiers enregistrés de cette manière ne peuvent pas être ouverts, console.log(typeof(data) ) verra qu'il est de type chaîne. que jquery convertit les données renvoyées en chaîne et ne prend pas en charge le type blob.

La bonne manière

<button type="button" onclick="download()">导出</button>
function download() {
  var url = &#39;download/?filename=aaa.txt&#39;;
  var xhr = new XMLHttpRequest();
  xhr.open(&#39;GET&#39;, 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(&#39;a&#39;);
        a.download = &#39;data.xlsx&#39;;
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

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

Articles associés :

Comment le framework Django utilise la méthode post ajax (tutoriel graphique)

django obtient l'objet complexe post ajax Méthode (tutoriel graphique)

À propos du problème de transmission de données en arrière-plan via une réponse en Ajax (y compris le code, analyse détaillée)

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!