javascript - Hur kan jag ladda ner en fil med hjälp av window.fetch?

Om jag vill ladda ner en fil, vad ska jag göra i then-blocket nedan?

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

Observera: Koden är på klientsidan.

Svar #1

Detta är kortare och effektivare, inga bibliotek, bara fetch API

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

Denna lösning tillåter dig inte att ändra filnamnet för den nedladdade filen. Filnamnet kommer att vara ett slumpmässigt uuid.

Svar #2

REDIGERA: syg-svaret är bättre. Använd bara downloadjs-biblioteket.

Svaret jag gav fungerar bra på Chrome, men på Firefox och IE behöver du en annan variant av den här koden. Det är bättre att använda det här biblioteket för det.

Jag hade ett liknande problem (behöver skicka med auktoriseringsheader för att ladda ner en fil, så den här lösningen hjälpte inte).

Men baserat på detta svar kan du använda createObjectURL för att få din webbläsare att spara en fil som laddats ner med Fetch API.

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

Svar #3

Jag löser tillfälligt detta problem genom att använda download.js och 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);
  });
}

Det fungerar för små filer, men kanske inte för stora filer. Jag tror att jag borde undersöka Stream mer.

Svar #4

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

eller :

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

Relaterade artiklar