Wie kann ich eine Datei mit window.fetch herunterladen?

Was kann ich im folgenden thenBlock tun, wenn ich eine Datei herunterladen möchte ?

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

Beachten Sie, dass sich die Codes clientseitig befinden.

EDIT : Syg Antwort ist besser. Verwenden Sie einfach die downloadjs Bibliothek.

Die Antwort, die ich gegeben habe, funktioniert gut in Chrome, aber in Firefox und IE benötigen Sie eine andere Variante dieses Codes. Es ist besser, dafür die Bibliothek zu verwenden.

Ich hatte ein ähnliches Problem (ich muss den Autorisierungsheader übergeben, um eine Datei herunterzuladen, damit diese Lösung nicht hilft).

Basierend auf dieser Antwort können Sie createObjectURLden Browser veranlassen, eine von der Fetch-API heruntergeladene Datei zu speichern.

getAuthToken()
    .then(token => {
        fetch("http://example.com/ExportExcel", {
            method: 'GET',
            headers: new Headers({
                "Authorization": "Bearer " + token
            })
        })
        .then(response => response.blob())
        .then(blob => {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = "filename.xlsx";
            document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
            a.click();    
            a.remove();  //afterwards we remove the element again         
        });
    });

Ich löse dieses Problem vorübergehend mit download.js und blob.

let download = require('./download.min');

...

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(function(resp) {
    return resp.blob();
  }).then(function(blob) {
    download(blob);
  });
}

Es funktioniert für kleine Dateien, aber möglicherweise nicht für große Dateien. Ich denke ich sollte Stream mehr graben .

Dies ist kürzer und effizienter, keine Bibliotheken rufen nur API ab

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);
  });

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
  return false;
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

oder:

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

Dowloadjs verwenden. Dadurch wird der Dateiname aus dem Header analysiert.

fetch("yourURL", {
    method: "POST",
    body: JSON.stringify(search),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
    })
    .then(response => {
        if (response.status === 200) {
            filename = response.headers.get("content-disposition");
            filename = filename.match(/(?<=")(?:\\.|[^"\\])*(?=")/)[0];
            return response.blob();
        } else {
        return;
        }
    })
    .then(body => {
        download(body, filename, "application/octet-stream");
    });
};

Hier ist ein Beispiel für die Verwendung von Node-Fetch für alle, die dies finden.

reportRunner({url, params = {}}) {
    let urlWithParams = `${url}?`
    Object.keys(params).forEach((key) => urlWithParams += `&${key}=${params[key]}`)
    return fetch(urlWithParams)
        .then(async res => ({
            filename: res.headers.get('content-disposition').split('filename=')[1],
            blob: await res.blob()
        }))
        .catch(this.handleError)
}

Ich habe window.fetch ausprobiert, aber das wurde mit meiner REACT-App kompliziert

Jetzt ändere ich einfach window.location.href und füge Abfrageparameter wie das jsonwebtokenund hinzu other stuff.

///==== client side code =====
var url = new URL(`http://${process.env.REACT_APP_URL}/api/mix-sheets/list`);
url.searchParams.append("interval",data.interval);
url.searchParams.append("jwt",token)

window.location.href=url;

// ===== server side code =====

// on the server i set the content disposition to a file
var list = encodeToCsv(dataToEncode);
res.set({"Content-Disposition":`attachment; filename=\"FileName.csv\"`});
res.status(200).send(list)

Die Endergebnisse sind tatsächlich ziemlich gut, das Fenster stellt eine Anfrage und lädt die Datei herunter und der Ereignisschalter verschiebt die Seite nicht weg, als wäre der window.location.hrefAnruf wie ein zurückhaltender fetch()Anruf.

Wie bei einigen anderen Antworten können Sie auf jeden Fall window.fetch und download.js verwenden , um eine Datei herunterzuladen. Die Verwendung von window.fetch mit blob unterliegt jedoch den vom Browser auferlegten Speicherbeschränkungen, und die Kompatibilitätsbeschränkungen für download.js gelten ebenfalls .

Wenn Sie eine große Datei herunterladen müssen, möchten Sie sie nicht im Speicher der Client-Seite ablegen, um den Browser zu belasten, oder? Stattdessen möchten Sie es wahrscheinlich lieber über einen Stream herunterladen. In einem solchen Fall ist die Verwendung eines HTML-Links zum Herunterladen einer Datei eine der besten / einfachsten Möglichkeiten, insbesondere zum Herunterladen großer Dateien über einen Stream.

Erster Schritt: Erstellen und formatieren Sie ein Linkelement

Sie können den Link unsichtbar, aber dennoch umsetzbar machen.

HTML:

<a href="#" class="download-link" download>Download</a>

CSS:

.download-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

Schritt 2: Legen Sie den hrefLink fest und lösen Sie das clickEreignis aus

JavaScript

let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;

const downloadLink = document.querySelector('.download-link')
downloadLink.href = url + '&ts=' + new Date().getTime() // Prevent cache
downloadLink.click()

Hinweis : Sie können das Verknüpfungselement bei Bedarf dynamisch generieren.