vue项目中导出zip压缩包

最新推荐文章于 2024-08-27 13:15:24 发布

木头人，嘿！

最新推荐文章于 2024-08-27 13:15:24 发布

阅读量1.4k

点赞数 1

文章标签： vue vue.js es6

本文链接：https://blog.csdn.net/m0_46186051/article/details/116301126

版权

本文介绍了如何在Vue项目中导出包含HTML页面及其相关依赖的Zip压缩包。通过使用JSZip和axios库，首先创建JSZip实例，然后将HTML文件内容添加到压缩包，接着异步获取并添加所有依赖文件。由于axios.all用于处理并发请求，确保所有文件加载完成后才生成Zip。注意，所有文件加载必须在zip.generateAsync之前完成，以防止压缩包为空。

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

vue项目中导出zip压缩包

项目中需要导出含有html单页面的压缩包，并且需要把相关依赖放到压缩包中。

在vue项目中import只能加载es6写法的js文件，要想加载非es6写法的js文件，可以用axios方法。（目前还没有找到其他的方法）

安装相关依赖

npm i jszip
npm i file-saver

import JSZip from "jszip";
import { saveAs } from "file-saver";
import axios from "axios";
// 导出zip压缩包函数
downloadZip(){
    // 创建一个JSZIP实例
    let zip = new JSZip();
    // 在zip压缩包中创建一个文件夹，用来放相关依赖
    let packages = zip.folder("packages");
    let fileArr = [];
    let filename = [];
    // 引入含有html字符串的js文件，构造html文件
    await import("./export.js").then((modules) => {
        zip.file("index.html", modules.html);
    });
    // 所有的依赖文件都放在packages中，res.data取到是packages文件夹中的所有文件的文件名，注意静态文件必须放在项目中静态资源文件夹，在vue-cli2.0中是public，否则axios无法加载文件；在vue-cli3.0是static。
    // 目前还没有找到直接向zip添加文件包的方法，所以只能写了循环
    await axios.get("/packages").then((res) => {
        for (let i in res.data) {
            filename = res.data;               
            fileArr.push(axios.get(`/packages/${res.data[i]}`));            
        }
    });
    await axios.all(fileArr).then((contents) => {
        for (let i in contents) {
           packages.file(filename[i], contents[i].data);
        }
    });
    zip.generateAsync({
        type: "blob",
    }).then((content) => {
        // 此处采用file-saver的saveAs方法和直接创建a标签下载的效果是一样的，只是saveAs写起来更简便写
        saveAs(content, `${this.settingsData.job_name}.zip`);
    });
}

为什么不在for循环中直接写axios请求，而要用axios.all方法？
如果把axios请求写在for循环中，会导致先执行zip.generateAsync后获取到文件内容；那在for循环内部的axios前加await变成同步呢，会报错，具体为什么还没有搞明白；所以只能把请求写在外部，用axios.all来处理多个并发请求。
注意：zip.generateAsync之前所有的加载文件方法都要是同步的，否则就是先执zip.generateAsync，后加载需要的文件，导致压缩包内为空。