jszip导出网页图片到压缩包框架

最新推荐文章于 2024-05-17 02:33:28 发布

前端小凯

最新推荐文章于 2024-05-17 02:33:28 发布

阅读量219

点赞数 4

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_43235503/article/details/138049839

版权

本文介绍了如何在JavaScript中安装并使用jszip库，通过逐个获取网页图片的ArrayBuffer并将其添加到压缩包中，最终实现文件的下载和压缩功能。

摘要由CSDN通过智能技术生成

第一步：安装jszip依赖

npm install jszip --save-dev

第二步：引入导出网页图片到压缩包方法

import JSZip from "jszip";

第三步：使用导出网页图片到压缩包方法

/**
 * 下载
 */
download() {
    let blogTitle = `下载图片`;
    let zip = new JSZip();
    let promises = [];
    let cache = {};
    // 要下载图片的url
    let arrImg = [];
        //fileList问下载的文件的全连接地址集合
    for (let i = 0; i < this.fileList.length; i++) {
        arrImg.push({
            path: this.fileList[i].img_url,
            name: this.fileList[i].case_name == null ? '测试_'+ this.fileList[i].img_url + '.png': this.fileList[i].case_name + "_" + this.fileList[i].img_url + ".png",
        });
    }
    for (let item of arrImg) {
        const promise = this.getImgArrayBuffer(item.path).then((data) => {
            // 下载文件, 并存成ArrayBuffer对象(blob)
            zip.file(item.name, data, { binary: true }); // 逐个添加文件
            cache[item.name] = data;
        });
        promises.push(promise);
    }
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
            // 生成二进制流
            saveAs(content, blogTitle); // 利用file-saver保存文件  自定义文件名
        });
    }).catch((res) => {
        this.$message.error("文件压缩失败");
    });
},
/**
 * 文件以流的形式获取
 */
getImgArrayBuffer(url) {//url为文件地址
    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();
    });
}