node - fetching data javascript

¿Cómo puedo descargar un archivo usando window.fetch?

Question

Si quiero descargar un archivo, ¿qué debo hacer en el bloque a continuación?

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

Tenga en cuenta que los códigos están en el lado del cliente.

Answer 1

Aquí hay un ejemplo usando node-fetch para cualquiera que encuentre esto.

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

Answer 2

Resuelvo temporalmente este problema usando download.js y 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);
  });
}

Funciona para archivos pequeños, pero tal vez no funcione para archivos grandes. Creo que debería cavar Stream más.

Answer 3

Usando dowloadjs. Esto analizará el nombre del archivo desde el encabezado.

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

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

o:

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

Answer 5

EDITAR : syg respuesta es mejor. Solo usa la biblioteca downloadjs .

La respuesta que proporcioné funciona bien en Chrome, pero en Firefox e IE necesita alguna variante diferente de este código. Es mejor usar la biblioteca para eso.

Tuve un problema similar (necesito pasar el encabezado de autorización para descargar un archivo, por lo que this solución no ayudó).

Pero en base a this respuesta, puede usar createObjectURL para hacer que el navegador guarde un archivo descargado por 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         
        });
    });