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 サイトの他の関連記事を参照してください。