vue中多个文件链接打包为一个zip压缩包下载

vue中多个文件链接打包为一个zip压缩包下载

一、安装依赖：npm install --save axios JSZip FileSaver
二、在文件中引入模块axios JSZip FileSaver

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default{
	 data(){
	 	urlList :[
	        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
	        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
	        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
	        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
	      ]
	 }
	 methods:{
	 	//将链接转化为arraybuffer文件流格式
		 getFile(url) {
	      return new Promise((resolve, reject) => {
	        axios({
	          method: 'get',
	          url,
	          responseType: 'arraybuffer',
	        })
	          .then((data) => {
	            resolve(data.data)
	          })
	          .catch((error) => {
	            reject(error.toString())
	          })
	      })
	    },
	    //下载图片
	    downloadPic() {
	      this.loading = true
	      const zip = new JSZip()
	      const promises = []
	      //将文件添加到压缩包中
	      urlList.forEach((url，index) => {
	        const promise = this.getFile(url).then((data) => {
	        	//截取后缀名（注意重命名一定要加上原来图片的后缀，否则下载出来的文件就是错误的）
	          let nameList = url.split('.')
	          let fileName = index + '.' + nameList[nameList.length - 1]
	          zip.file(fileName, data, { binary: true })//文件名、文件流、是否为二进制
	        })
	        promises.push(promise)
	      })
	      //等待所有文件添加完进行打包
	      Promise.all(promises)
	        .then(() => {
	          zip.generateAsync({ type: 'blob' }).then((content) => {
	            //利用file-saver保存文件  自定义文件名
	            FileSaver.saveAs(
	              content,
	              new Date().getTime()
	            )
	            this.loading = false
	          })
	        })
	        .catch((err) => {
	          this.$message.error(err || '文件压缩失败')
	          this.loading = false
	        })
	    },
	}    
}

三、若图片/文件链接不是https的，需要链接所在的服务器支持跨域，否则会报跨域的错