Comment implémenter le téléchargement asynchrone de fichiers ajax

Cette fois, je vais vous expliquer comment implémenter le téléchargement asynchrone de fichiers ajax. Quelles sont les précautions pour le téléchargement asynchrone de fichiers ajax. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 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('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 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 font cela. On dit que la première méthode peut satisfaire l'erreur

<.>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()
  })
}

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 La raison est que jquery convertit. les données renvoyées dans une 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 = '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()
}

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment AjaxFileUpload ajoute-t-il dynamiquement une boîte de téléchargement de fichiers

Un résumé pratique d'Ajax et de jsonp dans le projet

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!