vue前端拿到后端pdf与zip等重新打包为一个新的zip包

小小亮01

已于 2023-09-11 09:55:30 修改

阅读量517

点赞数

CC 4.0 BY-SA版权

分类专栏： vue vue组件文章标签： vue.js 前端 pdf

于 2023-09-11 09:55:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43845137/article/details/132800793

vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

vue组件

20 篇文章

订阅专栏

文章描述了如何在Vue前端使用JSZip库将后端提供的PDF和ZIP文件下载并打包成一个新的ZIP文件，通过fetchAPI获取文件内容并保存到本地。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue前端拿到后端pdf与zip等重新打包为一个新的zip包

code.vue

      const urlList = [
        {
          fileUrl:'https://XX.zip',
          fileName:'我是文件.zip'
        },
        {
          fileUrl:'https://XXX.pdf',
          fileName:'我是pdf.pdf'
        }
      ]
      this.downloadZip(urlList)

    downloadZip(urlList){
      console.log('downloadZip',urlList);
      // 创建一个zip
      const zip = new JSZip();
      // 获取文件 放入zip包中
      const fetchAndAddToZip = async (fileUrl, fileName) => {
        const response = await fetch(fileUrl);
        const fileBlob = await response.blob();
        zip.file(fileName, fileBlob, { binary: true });
      };
      // 生成下载zip包
      const generateAndDownloadZip = async () => {
        // 遍历把文件丢到zip包中
        for (const url of urlList) {
          await fetchAndAddToZip(url.fileUrl, url.fileName);
        }
        // 生成一个zip包
        const content = await zip.generateAsync({ type: 'blob' });
        // 保存到本地
        FileSaver.saveAs(content, 'files.zip');
      };

      generateAndDownloadZip();
    }