Wie kann ich eine Datei mithilfe der clientseitigen Abruf-API herunterladen?

So laden Sie eine Datei mit clientseitigem Abruf herunter

Bei der Entwicklung einer Web- oder Mobilanwendung müssen Sie möglicherweise Dateien von einem herunterladen Remote-Server auf das Gerät des Benutzers. Mit der Einführung der Fetch-API ist das Herunterladen von Dateien auf der Clientseite viel einfacher geworden.

Bedenken Sie den folgenden Codeausschnitt:

<code class="javascript">function downloadFile(token, fileId) {
  let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
  return fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': token
    }
  }).then(...);
}</code>

In diesem Szenario haben Sie eine Fetch-Anfrage definiert, der eine Datei von Google Drive abruft. Es stellt sich die Frage: Was sollten Sie im Then-Block tun, um die Datei herunterzuladen?

Im Folgenden wird ein saubererer und effizienterer Ansatz zum Herunterladen von Dateien gezeigt, bei dem die Fetch-API verwendet wird, ohne auf zusätzliche Bibliotheken angewiesen zu sein.

<code class="javascript">const url = 'http://sample.example.file.doc';
const authHeader = "Bearer 6Q************"; 

const options = {
  headers: {
    Authorization: authHeader
  }
};
fetch(url, options)
  .then(res => res.blob())
  .then(blob => {
    var file = window.URL.createObjectURL(blob);
    window.location.assign(file);
  });</code>

Dieses Code-Snippet initialisiert eine Abrufanforderung mit der entsprechenden URL und dem Autorisierungsheader. Anschließend verwendet es die Methode res.blob(), um die Binärdaten der Datei abzurufen. Anschließend wird eine temporäre Objekt-URL für die Datei erstellt und der window.location zugewiesen, um den Download auszulösen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Datei mithilfe der clientseitigen Abruf-API herunterladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!