Bagaimanakah Saya Boleh Mencetuskan Muat Turun Fail dalam AJAX Post Responses?

Mengendalikan Muat Turun Fail dalam AJAX Post Responses

Apabila mereka bentuk aplikasi AJAX, adalah perkara biasa untuk mengendalikan pelbagai jenis respons, termasuk JSON dan kemungkinan fail lampiran. Mengesan jenis respons berdasarkan pengepala Jenis Kandungan dan Pelupusan Kandungan adalah mudah. Walau bagaimanapun, mencetuskan dialog muat turun boleh menimbulkan cabaran.

Mujurlah, penyemak imbas moden menyediakan penyelesaian melalui FileAPI. Coretan kod berikut menunjukkan cara melaksanakan muat turun fail dalam permintaan siaran AJAX:

// Using native XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
  if (this.status === 200) {
    // Retrieve the blob and filename from the response
    var blob = this.response;
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
      filenameRegex = /filename[^;=\n]*=((['"])).*?|[^;\n]*)/;
      matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Manage file download based on browser capabilities
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE workaround for a known issue
      window.navigator.msSaveBlob(blob, filename);
    } else {
      var URL = window.URL || window.webkitURL;
      var downloadUrl = URL.createObjectURL(blob);
      var a = document.createElement("a");
      if (a.download !== 'undefined') {
        a.href = downloadUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
      } else {
        window.location.href = downloadUrl;
      }
      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params, true));

Jika menggunakan jQuery.ajax:

$.ajax({
  type: "POST",
  url: url,
  data: params,
  xhrFields: {
    responseType: 'blob' // to avoid binary data being mangled on charset conversion
  },
  success: function(blob, status, xhr) {
    // Retrieve the blob and filename from the response
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
      filenameRegex = /filename[^;=\n]*=((['"])).*?|[^;\n]*)/;
      matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Manage file download based on browser capabilities
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE workaround for a known issue
      window.navigator.msSaveBlob(blob, filename);
    } else {
      var URL = window.URL || window.webkitURL;
      var downloadUrl = URL.createObjectURL(blob);
      var a = document.createElement("a");
      if (a.download !== 'undefined') {
        a.href = downloadUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
      } else {
        window.location.href = downloadUrl;
      }
      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }
});

Dengan menggabungkan teknik ini, anda boleh memastikan AJAX anda permintaan siaran boleh mengendalikan lampiran fail dengan lancar dan mencetuskan dialog muat turun untuk pelanggan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Muat Turun Fail dalam AJAX Post Responses?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!