vue3压缩下载public资源中的文件夹

263 阅读1分钟

首先我们install:

npm install jszip file-saver

而想要下载public的文件夹数据,首先我们要获取文件夹的结构:

const files = import.meta.glob("/public/**/*");
let filesPbulic = Object.keys(files);

获取到文件夹的结构以后,我们要做的就是获取到文件内容,然后把内容转换成zip插件需要的格式:

const downloadAllFiles = async () => {    const zip = new JSZip();    const folderName = "fileName"; // 你要下载的文件夹名称    let filesStructurePbulic = Object.keys(files);    // 遍历文件列表,获取文件内容并添加到 zip 中    const promises = [];    filesChild.forEach((item) => {
       //此处是获取文件内容的方法,我使用axios来获取        const promise = getFile(item).then((data) => {            let fileName = item.slice(item.lastIndexOf("/") + 1); //获取文件名
            //要将文件内容转换为blob格式zip才能识别            const blob = new Blob([data], { type: "application/json" });            zip.file(fileName, blob, { binary: true }); //逐个添加文件        });        promises.push(promise);    });    Promise.all(promises)        .then(() => {            zip.generateAsync({ type: "blob" }).then((content) => {                saveAs(content, "myFiles.zip");            });        })        .catch((err) => {            console.log("文件压缩失败");        });};

获取文件内容的方法:

const getFile = (url) => {    return new Promise((resolve, reject) => {        axios({            url: url,            method: "get",        }).then((res) => {            resolve(res.data);        });    });};

注意:获取.ts文件的时候会报错,我们可以先把ts文件改为其他后缀,然后在zip.file的时候把文件名中的后缀给改回来就可以了!