javascript如何打包七牛檔案並下載壓縮（程式碼）

這篇文章帶給大家的內容是關於javascript如何打包七牛檔案並下載壓縮（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

需求分析：根據七牛儲存的檔案url，把這些檔案打包下載。

實作方式，取得檔案內容，使用 jszip 進行壓縮，最後使用 file-saver 進行儲存下載。

需要注意兩點：

1：某些 web框架（例如 laravel） 會給 axios 配置上預設的請求頭。在請求檔案時需要移除預設的請求頭，同時設定Content-type 為'application/x-www-form-urlencoded; charset=UTF-8'， 否則會導致跨網域。

2：response type 是binary，檔案是以二進位的方式傳過來的，所以要設定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('导出失败')
});

相關推薦：

七牛mkzip壓縮中文檔案名稱亂碼

實例詳解Vue 中批次下載檔案並打包方法

以上是javascript如何打包七牛檔案並下載壓縮（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！