vue將文件/圖片批量打包下載zip

vue將文件/圖片批量打包下載

TOC

vue將文件/圖片批量打包下載

各種格式都可以,只要url能夠打開或者下載文件即可.

1.通過文件的url,使用js的XMLHttpRequest獲取blob
2.將blob壓縮為zip

由於異步並行加載文件,速度還是蠻快的,我141個4M多的圖片,1分左右加載完成,49個4M的圖片4秒

• 添加依賴

//npm install jszip
//npm install file-saver
在頁面的script中引入依賴
import JSZip from 'jszip'
import FileSaver from 'file-saver'

• 代碼

      /**文件打包
       * arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
       * filename 壓縮包名
       * */
      filesToRar(arrImages, filename) {
        let _this = this;
        let zip = new JSZip();
        let cache = {};
        let promises = [];
        _this.title = '正在加載壓縮文件';

        for (let item of arrImages) {
          const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => {
            // 下載文件, 並存成ArrayBuffer對象(blob)
            zip.file(item.renameFileName, data, { binary: true }); // 逐個添加文件
            cache[item.renameFileName] = data;
          });
          promises.push(promise);
        }

        Promise.all(promises).then(() => {
          zip.generateAsync({ type: "blob" }).then(content => {
            _this.title = '正在壓縮';
            // 生成二進制流
            FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定義文件名
            _this.title = '壓縮完成';
          });
        }).catch(res=>{
          _this.$message.error('文件壓縮失敗');
        });
      },
    //獲取文件blob
      getImgArrayBuffer(url){
        let _this=this;
        return new Promise((resolve, reject) => {
            //通過請求獲取文件blob格式
          let xmlhttp = new XMLHttpRequest();
          xmlhttp.open("GET", url, true);
          xmlhttp.responseType = "blob";
          xmlhttp.onload = function () {
            if (this.status == 200) {
              resolve(this.response);
            }else{
              reject(this.status);
            }
          }
          xmlhttp.send();
        });

      },

來自為知筆記(Wiz)