So verwenden Sie AngularJS, um die Funktion zum Herunterladen von Excel-Dateien zu implementieren

In diesem Artikel wird hauptsächlich die Funktion von AngularJS zum Herunterladen der von PHP generierten Excel-Datei auf der Grundlage einer HTTP-Anfrage vorgestellt. Er analysiert AngularJS-HTTP-Anfragen und das Herunterladen von Dateien sowie andere verwandte Betriebsfähigkeiten in Form von Beispielen

Das Beispiel in diesem Artikel beschreibt, wie AngularJS die Funktion zum Herunterladen von Excel-Dateien implementiert, die von PHP basierend auf http-Anfragen generiert wurden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Studenten, die das PHPExcel-Plug-in verwenden, wissen, dass der Excel-Export den Inhaltstyp des generierten Inhalts direkt ändert, um den Inhalt als Datei herunterzuladen. Zu diesem Zeitpunkt muss auf der Seite eine URL vorhanden sein, die durch Klicken heruntergeladen werden kann.

Dann stellt sich die Frage: Wenn beim Generieren von Excel Anforderungsparameter vorhanden sind, kann diese nur über die HTTP-Anfrage von js angefordert werden. Wie kann ich sie derzeit herunterladen?

Nach einiger Recherche gibt es mehrere Möglichkeiten:

1. Angularjs erstellt einen Tag, um das Herunterladen zu simulieren

// 创建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);
  });
}

Dies Bitte beachten Sie bei der Methode, dass bei der Übertragung einer XLS-Datei, also einer Excel5-Datei, der Typ auf application/vnd.ms-excel oder application/x-excel.

2. js generiert eine URL aus den Anforderungsparametern, erstellt ein Tag

// 生成下载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;

und bindet die URL dann an ein a-Tag, this Diese Methode eignet sich für Situationen, in denen weniger Parameter vorhanden sind und die Daten nicht zweimal verarbeitet werden, wodurch die Wahrscheinlichkeit geringer ist, dass Fehler auftreten. Der einzige Nachteil besteht darin, dass sie zweimal verarbeitet werden müssen. Sie können zwei Schaltflächen festlegen, eine zum Generieren und eine Schreiben der Parameter in die URL und die zweite Schaltfläche zum Herunterladen von Excel. Obwohl der Benutzer zweimal arbeitet, erfolgt tatsächlich nur eine HTTP-Anfrage, was sich nicht auf die Leistung auswirkt.

3. Zuerst generieren und dann herunterladen

Die dritte Methode ähnelt der zweiten, zuerst die Excel-Datei generieren und speichern Laden Sie es auf den Server herunter und laden Sie es dann herunter. Da es sich um Festplatten-E/A handelt, ist die Leistung relativ gering. Diese Methode wird nicht empfohlen und wird nur als Methode aufgezeichnet.

Die simulierte Download-Methode von AngularJS ist die bequemste, es können jedoch Fehler auftreten. Die zweite Methode ist die sicherste.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So kompilieren, verpacken und anzeigen Sie Indexdateien in Vue

So verwenden Sie die Jade-Vorlage in Vue

Vorlage an Komponente in Angular übergeben

Das obige ist der detaillierte Inhalt vonSo verwenden Sie AngularJS, um die Funktion zum Herunterladen von Excel-Dateien zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!