zoukankan      html  css  js  c++  java
  • vue使jsZip和FileSaver.js打包下载

    安装

    npm install jszip
    npm install file-saver --save
    

    在组件中

    import JSZip from 'jszip'
    import FileSaver from "file-saver"
    //调用
    this.filesToRar(this.imgList,"学生涂鸦答题照片");
    /**文件打包
    *@param {object} arrImages 文件list:[ { url:文件url , title:文件名 } ]
    *@param {string} filename 压缩包的名字
    **/
    filesToRar(arrImages, filename) {
        let _this = this;
        let zip = new JSZip();
        let cache = {};
        let promises = [];
        let i = 0;
        arrImages.forEach((item)=>{
            var promise = _this.getImgArrayBuffer(item.url).then(data => {
                i++;
                let name = "(" + i + ")" + item.title + ".png";
                // 下载文件, 并存成ArrayBuffer对象(blob)
                zip.file(name, data, { binary: true }); // 逐个添加文件
                cache[name] = data;
            });
            promises.push(promise);
        })
        Promise.all(promises).then(() => {
            zip.generateAsync({ type: "blob" }).then(content => {
                // 生成二进制流
                FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定义文件名
            });
        })
        .catch(res=>{
            console.log("压缩失败")
        });
    }
    
    /**通过url获取文件blob
    *@param {string} url 图片http路径
    **/
    getImgArrayBuffer(url){
        return new Promise((resolve, reject) => {
            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();
        });
    }
  • 相关阅读:
    POJ2635-The Embarrassed Cryptographer-大整数素因子
    poj2115-C Looooops -线性同余方程
    POJ1942-Paths On a Grid-组合数学
    poj1850-CODE-组合
    POJ1019-Number Sequence-数数。。
    CF-Contest339-614
    POJ3252-RoundNumbers-排列组合
    睡前小dp-poj3254-状压dp入门
    AC自动机-HDU3065-简单题
    python学习笔记 day32 实现网盘上传下载功能
  • 原文地址:https://www.cnblogs.com/wlming/p/13969072.html
Copyright © 2011-2022 走看看