Heim >Web-Frontend >js-Tutorial >Wie verpackt Javascript Qiniu-Dateien und lädt die Komprimierung herunter (Code)?
Der Inhalt dieses Artikels befasst sich mit dem Packen von Qiniu-Dateien und dem Herunterladen von Komprimierungscode (Code) mit Javascript. Ich hoffe, dass er für Sie hilfreich ist.
Anforderungsanalyse: Packen und laden Sie diese Dateien basierend auf den in Qiniu gespeicherten Datei-URLs herunter.
Die Implementierungsmethode besteht darin, den Dateiinhalt abzurufen, ihn mit jszip zu komprimieren und schließlich den Dateisparer zum Speichern und Herunterladen zu verwenden.
Zwei zu beachtende Punkte:
1: Einige Web-Frameworks (z. B. Laravel) konfigurieren Standard-Anfrageheader für Axios. Wenn Sie eine Datei anfordern, müssen Sie den Standardanforderungsheader entfernen und den Inhaltstyp auf „application/x-www-form-urlencoded=UTF-8“ setzen, da es sonst zu domänenübergreifenden Problemen kommt.
2: Der Antworttyp ist binär und die Datei wird im Binärformat übergeben, also setzen Sie den Antworttyp auf Blob.
Teil des Codebeispiels:
import JSZip from 'jszip' import filesaver from "file-saver" var zip = new JSZip(); // 我用的 axios 需要把这两个 header 删掉 delete window.axios.defaults.headers.common['X-Requested-With']; delete window.axios.defaults.headers.common['X-CSRF-TOKEN']; axios.get(file.file_url, { responseType: 'blob', headers : { 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' } }).then(function(res){ var response = res.data; zip.file(file.id + "_" + file.name, response, {binary: true}); // do your job }).catch(function(error){ console.error(error); });
Speichern:
zip.generateAsync({ type: "blob" }).then((blob) => { filesaver.saveAs(blob, this.current_zip_name) }, (err) => { alert('导出失败') });
Verwandte Empfehlungen:
Qiniu mkzip komprimierter chinesischer Dateiname mit verstümmelten Zeichen
Instanz detaillierte Erklärung des Batch-Downloads und Paketieren von Dateien in der Vue-Methode
Das obige ist der detaillierte Inhalt vonWie verpackt Javascript Qiniu-Dateien und lädt die Komprimierung herunter (Code)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!