ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript はどのように Qiniu ファイルをパッケージ化し、圧縮 (コード) をダウンロードしますか
この記事の内容は、JavaScript を使用して Qiniu ファイルをパッケージ化し、圧縮 (コード) をダウンロードする方法についてです。必要な方は参考にしていただければ幸いです。
要件分析: Qiniu に保存されているファイル URL に基づいて、これらのファイルをパックしてダウンロードします。
実装方法は、ファイルの内容を取得し、jszipを使用して圧縮し、最後にファイルセーバーを使用して保存およびダウンロードします。
注意すべき 2 つのポイント:
1: 一部の Web フレームワーク (laravel など) は、axios のデフォルトのリクエスト ヘッダーを構成します。ファイルをリクエストするときは、デフォルトのリクエスト ヘッダーを削除し、Content-type を「application/x-www-form-urlencoded; charset=UTF-8」に設定する必要があります。そうしないと、クロスドメインが発生します。
2: 応答タイプはバイナリであり、ファイルはバイナリで渡されるため、responseType を blob に設定します。
コード例の一部:
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); });
保存:
zip.generateAsync({ type: "blob" }).then((blob) => { filesaver.saveAs(blob, this.current_zip_name) }, (err) => { alert('导出失败') });
関連推奨事項:
Qiniu mkzip 圧縮中国語のファイル名が文字化けする
Vueでファイルを一括ダウンロードしてパッケージ化する方法の例を詳しく解説
以上がJavaScript はどのように Qiniu ファイルをパッケージ化し、圧縮 (コード) をダウンロードしますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。