vue 前端需将用户所选的素材(图片)压缩到zip包中形成单个文件提供下载（附加单张图片/素材直接下载)

章鱼哥揍蜡笔小新

已于 2022-07-06 17:13:33 修改

阅读量407

点赞数 3

文章标签： vue.js 前端 javascript

于 2022-06-16 16:43:16 首次发布

本文链接：https://blog.csdn.net/weixin_44095605/article/details/125318816

版权

该博客介绍了如何在前端实现图片素材的批量下载和单张下载功能。通过使用JSZip库和FileSaver库，结合Promise处理异步操作，实现了将多个图片URL打包成ZIP文件供用户下载。同时，提供了代理配置以解决跨域问题，并展示了单张图片的下载方法。文章详细阐述了每个步骤和关键代码片段，对于前端开发者处理类似需求具有参考价值。

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

第一步

npm i JSZip FileSaver

第二步

import JSZip from 'jszip'
import FileSaver from 'file-saver'

第三步

function downloadZip (files) {
  let zip = new JSZip();
  let folder = zip.folder('files');
  let filename='素材'+new Date()+'.zip'
  Promise.resolve().then(() => {
    return files.reduce((accumulator, item) => {
		let num = item.url.lastIndexOf("/") + 1;
		let fileName = item.url.substring(num).split("?")[0];
		let imgSrc = '/upload/' + fileName;//涉及跨域需配置代理或者让后端解决下（我这里/upload 是自己做了代理 没有跨域就不要配置
		let name = fileName+'.'+item.suffix//(item.suffix要设置 不然文件打开不了 这里就是设置文件名+后缀 例如aa.jpg)
      return accumulator.then(() => fetch(imgSrc)
                        .then(resp => resp.blob())
                        .then(blob => folder.file(name, blob)))
    }, Promise.resolve())
  }).then(() => {
    folder.generateAsync({type: "blob"}).then(content => FileSaver.saveAs(content, filename));
  })
}

第四步

执行 downloadZip(selectedImgData)//selectedImgData是一个数组例如

[
  {
    "id": "1537010891991674882",
    "createTime": "2022-06-15 09:55:28",
    "updateTime": null,
    "suffix": "jpeg",
    "size": "18847",
    "url": "https:xxx",
    "thumbUrl": "https:xxx",
    "delFlag": false
  },
]

补充:关于前端代理配置

在vue.config.js配置 devServer

  proxy: {
	 '/upload': {
	 	//代理图片下载的接口
	 	target: 'https://xxx',
	 	changeOrigin: true,
	 	secure: false, // 设置支持https协议的代理
	 	pathRewrite: {
	 	    '^/upload': ''
	     }
	 } 
  }

补充2

export function downloadZip (files) {
  let zip = new JSZip();
  let folder = zip.folder('files');
  let filename='素材'+new Date()+'.zip'
  Promise.resolve().then(() => {
    return files.reduce((accumulator, item) => {
		let num = item.url.lastIndexOf("/") + 1;
		let fileName = item.url.substring(num).split("?")[0];
		let imgSrc = '/upload/' + fileName;
		let name = fileName+'.'+item.suffix
      return accumulator.then(() => fetch(item.url+'?time='+(new Date().valueOf()))/这里加上时间戳就可以
      // return accumulator.then(() => fetch(imgSrc)
                        .then(resp => resp.blob())
                        .then(blob => folder.file(name, blob)))
    }, Promise.resolve())
  }).then(() => {
    folder.generateAsync({type: "blob"}).then(content => FileSaver.saveAs(content, filename));
  })
}

附加：单张图片/素材直接下载这种方法可以直接下载不会在浏览器重新打开一个网页）

export function downLoadSigleFile (file) {
  let num = file.url.lastIndexOf("/") + 1;
  let fileName = file.url.substring(num).split("?")[0];
  let fileSrc = '/upload/' + fileName;
  let name = fileName+'.'+file.suffix
  Promise.resolve().then(() => {
    return fetch(file.url+'?time='+(new Date().valueOf())).then(resp => resp.blob())
    // return fetch(fileSrc).then(resp => resp.blob())
  }).then((blob) => {
	  const url = URL.createObjectURL(blob);
	  const a = document.createElement("a");
	  a.download = name ;
	  a.href = url;
	  a.click();
	  a.remove();
	  URL.revokeObjectURL(url);
  })
}