Was kann ich im folgenden then
Block 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.
javascript
fetch
fetch-api
Zachguo
quelle
quelle
https://www.googleapis.com/drive/v2/files/${fileId}?alt=media
<a>
Element mit einemdownload
Attribut zu erstellen und einen Klick auf dieses Element zu simulieren, alles unter Verwendung von JavaScript. Siehe Zibris Antwort (die übrigens weit nach meinem Kommentar veröffentlicht wurde).Antworten:
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
createObjectURL
den 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 }); });
quelle
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 .
quelle
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); });
quelle
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");
quelle
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"); }); };
quelle
fileName = fileName.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1] ? fileName.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1] : fileName;
filename.match()
, ich habe diesen Teil ersetzt durch :filename = response.headers.get("content-disposition").split(";")[1].split('"')[1];
. Außerdem muss der Server den Header deklarierenAccess-Control-Expose-Headers: Content-Disposition
, damit der Browser dencontent-disposition
Header lesen kann .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) }
quelle
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
jsonwebtoken
und hinzuother 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.href
Anruf wie ein zurückhaltenderfetch()
Anruf.quelle
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
href
Link fest und lösen Sie dasclick
Ereignis ausJavaScript
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.
quelle