多文件打包下载

一个不会写代码的码农

于 2024-08-21 16:01:53 发布

阅读量175

点赞数 2

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_65685799/article/details/141395919

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、单个下载

（1）下载方法(获取后端token)

 download(url) {
			let token = localStorage.getItem('token');
			url = url + "&token="+token
			window.location.href = this.urlEncode(url);
        }

（2）文件转码

// 附件下载地址转码
        urlEncode(url) {
            url = url.replace('[', '%5B');
            url = url.replace(']', '%5D');
            return url;
        },

2、多文件下载（需要引入js：https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js）

import * as JSZip from "@/util/JSzip.js" 导入配置文件

/**
         * @param {Object} data打包下载
         */
        downloadListAsZip(data) {
            this.loading = true;
            const zip = new JSZip();
            const promises = data.map(item => {
                return fetch(item.downUrl + "&token=" + localStorage.getItem('token'))
                    .then(response => response.blob())
                    .then(blob => {
                        zip.file(item.originalName || 'file', blob); // 文件名可以从数据中提取
                    });
            });
        
            Promise.all(promises).then(() => {
                zip.generateAsync({ type: 'blob' })
                    .then(content => {
                        const a = document.createElement('a');
                        a.href = URL.createObjectURL(content);
                        a.download = '工具文件.zip'; // 指定 ZIP 文件的名称
                        a.click();
                    });
            });
            this.loading = false;
        },