利用jszip实现批量文件压缩下载

最新推荐文章于 2024-06-14 10:23:42 发布

weixin_43411214

最新推荐文章于 2024-06-14 10:23:42 发布

阅读量682

点赞数 2

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_43411214/article/details/136734786

版权

1、安装插件

npm i jszip

2、实现方式

import JSZip from "jszip";

// 先封装一个方法，请求返回文件blob
async function fetchBlob(fetchUrl, method = "POST", body = null) {
    const response = await window.fetch(fetchUrl, {
        method,
        body: body ? JSON.stringify(body) : null,
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
        },
    });
    const blob = await response.blob();
    return blob;
}
// 下载文件
function downloadFile(url, fileName) {
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = fileName
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

const zip = new JSZip();

//保存txt文件
zip.file("Hello.txt", "Hello World\n"); // 支持纯文本等

//保存json文件
 let jsonData={}
 const blob = new Blob([JSON.stringify(jsonData, null, 4)], {
    type: 'application/json'
  })
  zip.file('notes.json', blob) // json文件

//保存图片
zip.file("img1.jpg", fetchBlob('图片地址', 'GET'));

//创建文件夹，在里面添加文件
const folder1 = zip.folder("folder"); // 创建folder
folder1.file("img3.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // folder里创建文件

//下载压缩包
zip.generateAsync({ type: "blob" }).then(blob => {
    const url = window.URL.createObjectURL(blob);
    downloadFile(url, "test.zip");
});