vue 使用jszip,file-saver下载压缩包,自定义文件夹名,文件名打包下载为zip压缩包文件,全局封装公共方法使用。

news2024/11/26 9:46:59

记录一下后台管理全局封装一个压缩包下载方法,文件夹名自定义,文件名自定义,压缩包名自定义。

安装必要的库

npm install jszip
npm install file-saver

自定义一个公共方法全局注入

在这里插入图片描述
在这里插入图片描述

页面使用

在这里插入图片描述

        /** 下载按钮操作 */
        handleDownload() {
            const ids = this.ids;
            let selectFileList = this.dataList.filter(o => ids.includes(o.id));
            this.$MyUtil.jszipDown({
                arrFileObj: selectFileList, // 必传
                filePath: 'lineCodeImg', //文件下载路径字段 必传
                fileName: 'lineName,lineCode', //文件自定义名字 可以不穿
            })
        },

my-util.js

import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
    /**
        * 在对象数组中找到一个属性值和参数相等的一条记录
        * @param {object} Obj 接受参数对象
        * arrFileObj 对象数组
        * filePath 文件下载路径字段
        * folderName 文件夹名字
        * fileName 文件自定义名字
        * jszipName 文件自定义名字
        * @returns 
        */
    jszipDown(Obj) {
        //此方法后端返回文件流
        function getUrlFile(url) {
            return new Promise((resolve, reject) => {
                axios({
                    method: 'post',
                    headers: {
                        'Authorization': 'Bearer ' + getToken(),
                        'Content-Type': 'application/json; application/octet-stream'
                    },
                    responseType: 'blob',
                    data: { url },
                    url: process.env.VUE_APP_BASE_API + '/common/proxy/download'
                }).then(res => {
                    resolve(res.data)
                }).catch(err => {
                    reject(err.toString())
                })
            })
        };
        const zip = new JSZip()
        const promiseList = [];
        Obj.arrFileObj.forEach(file => {
            if (file) {
                let fName = ''
                if (Obj.fileName) {
                    let format = file[Obj.filePath].split('.')
                    format = format[format.length - 1]
                    let nameL = Obj.fileName.split(',')
                    let name = nameL.map(item=>file[item]).join('-')
                    fName = name+'.'+format
                }else{
                    fName = file[Obj.filePath].split('/')
                    fName = fName[fName.length - 1]
                }
                const promise = getUrlFile(file[Obj.filePath]).then(data => {
                    if (Obj.folderName) {
                        zip.folder(file[Obj.folderName]).file(fName, data,{binary: true})
                    } else {
                        zip.file(fName, data,{binary: true})
                    }
                });
                promiseList.push(promise);
            }
        });
        Promise.all(promiseList).then(res => {
            zip.generateAsync({ type: 'blob' }).then(data => saveAs(data, Obj.jszipName?Obj.jszipName:'文件压缩包.zip'))
        }).catch(err => {
            console.log(err);
        });
    }

}


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2124712.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JAVA智能管理高效运营自营商城系统

智能管理,高效运营 —— 自营商城系统的魅力揭秘🚀 📈 开篇:告别繁琐,拥抱智能管理 你还在为商城运营的繁琐流程头疼吗?🤯 还在为数据分析的复杂性而烦恼吗?🤔 那就让我…

Python设计模式实战:开启软件设计的精进之旅

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

企业工商信息查询-企业工商信息查询接口-企业工商信息api

1、接口介绍 通过企业名称/社会统一信用代码/工商注册号三者其中之一快速查询全国企业工商数据,可查得企业工商基本信息。如:企业工商基本信息,企业法人,经营状态,注册资本,以及股东,高管&#…

[Linux入门]---进程等待

文章目录 1.进程等待必要性1.1什么是进程等待?**1.2为什么需要进程等待? 2.进程等待的方法2.1wait方法2.2waitpid方法2.2.1获取子进程status2.2.2options选项,父进程等待的三种方式 1.进程等待必要性 1.1什么是进程等待?** 通过系统调用wait/waitpid&…

结合长短期记忆网络(LSTM)和无迹卡尔曼滤波器(UKF)的技术在机器人导航和状态估计中的应用前景

结合长短期记忆网络(LSTM)和无迹卡尔曼滤波器(UKF)的技术在机器人导航和状态估计中具有广泛的应用前景。以下是关于这一主题的简要综述: 文章目录 结合LSTM和UKF的背景结合LSTM和UKF的优势应用实例研究现状MATLAB代码示例结合LSTM和UKF的背景 长短期记忆网络(LSTM)是一…

hadoop分布式搭建

hadoop的分布式搭建步骤: 第一步: 比如准备三台虚拟机,分别命名为master、node1、node2,并且确保都配置了java环境 ,都关闭了防火墙,都设置了静态的IP地址,然后三台虚拟机的hosts文件都互相映射&#xff0…

atcoder abc370(dp,基环树/森林,倍增)

A 代码&#xff1a; #include <bits/stdc.h>using namespace std;int main() {int a, b;cin >> a >> b;if(a 1 && b 0) cout << "Yes" << endl;else if(a 0 && b 1) cout << "No" << en…

【Centos】Centos系统换yum源

【Centos】Linux&#xff0c;Centos系统换yum源 1、备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak/etc/yum.repos.d/CentOS-Base.repo 是yum的配置文件 /etc/yum.repos.d/CentOS-Base.repo.bak 是我们备份的配置文件 2、下载yum源 这里…

这个开源的AI证件照项目又火了!有人靠它日入300+

今天在知识星球里看到一个球友靠一个AI证件照的项目赚到了第一桶金&#xff0c;看了看项目&#xff0c;还不错。整理下来分享给大家玩玩。 神器名叫HivisionIDPhotos&#xff0c;最近几天一直挂在GitHub热榜上&#xff0c;目前已狂揽3.2K星标。 除了能换背景&#xff0c;它还支…

你绝对想不到,ComfyUI竟然能这样转换线条图!

前言 使用ComfyUI将图像转为线条图&#xff1a;详细教程 在这个数码时代&#xff0c;图像处理技术已经像空气一样渗透进了我们的日常生活。今天&#xff0c;我想和大家分享一个既简单又高效的小妙招——用ComfyUI把图片变成线条图。 不管你是设计师、艺术家&#xff0c;还是…

深入掌握大模型精髓:《实战AI大模型》带你全面理解大模型开发!

今天&#xff0c;人工智能技术的快速发展和广泛应用已经引起了大众的关注和兴趣&#xff0c;它不仅成为技术发展的核心驱动力&#xff0c;更是推动着社会生活的全方位变革。特别是作为AI重要分支的深度学习&#xff0c;通过不断刷新的表现力已引领并定义了一场科技革命。大型深…

opencv羊群计数,动态目标检测跟踪

OpenCV&#xff08;开源计算机视觉库&#xff09;是一个功能强大的计算机视觉和图像处理库&#xff0c;广泛应用于各种视觉任务中&#xff0c;包括但不限于目标检测与跟踪。如果你正在考虑一个基于OpenCV的羊群计数项目&#xff0c;那么下面是对这样一个项目的概述&#xff1a;…

【动态规划】子序列问题二(数组中不连续的一段)

子序列问题二 1.最长定差子序列2.最长的斐波那契子序列的长度3.最长等差数列4.等差数列划分 II - 子序列 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&am…

易基因:Adv Sci:ACE等揭示产前不良环境暴露通过DNA羟甲基化变化介导子代自闭症|国人佳作

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 自闭症谱系障碍&#xff08;Autism spectrum disorder&#xff0c;ASD&#xff09;是一种神经发育障碍&#xff0c;以社交沟通障碍和刻板行为为主要特征。许多研究证明&#xff0c;妊娠期…

2024上半年上汽收入2770多亿,为啥没长城900多亿赚得多?

【科技明说 &#xff5c; 车评头条】 看了上汽集团和长城汽车两家的最新H1财报后&#xff0c;你是不是发现了点什么&#xff1f; 上汽集团披露2024年半年报。公司上半年实现合并营业收入2770.86亿元&#xff0c;同比下降12.43%&#xff1b;净利润66.28亿元&#xff0c;同比下…

vb.net发送邮件:如何高效地实现邮件发送?

vb.net发送邮件怎么配置服务器&#xff1f;怎么用vb.net发邮件&#xff1f; 如何高效地实现vb.net发送邮件&#xff0c;确保邮件能够快速、稳定地送达&#xff0c;是许多开发者面临的挑战。AokSend将深入探讨vb.net发送邮件的最佳实践&#xff0c;帮助您提升邮件发送的效率和可…

投屏开发调试技能-pcm数据转wav格式文件源码实战分享

背景 在学习投屏相关音视频开发时候&#xff0c;经常验证一些声音卡顿问题时候&#xff0c;需要对音频数据可能需要保存到本地&#xff0c;一般可能是pcm格式的数据&#xff0c;但是pcm格式的数据是不可以用音乐播放器直接进行播放&#xff0c;需要专门的工具&#xff0c;而且…

14种实际上有效的AI营销方法(专业推荐)

当有人提到人工智能时&#xff0c;你会感到头晕目眩吗&#xff1f;这是可以理解的。LinkedIn和Twitter&#xff08;好吧……现在叫X&#xff09;充斥着刚刚涌现的AI专家和科技达人们&#xff0c;他们在分享最新的27步算法攻略和自动化整个市场营销程序的操作。 这对大多数基层…

一款rust语言AI神器cursor在ubuntu环境下的安装启动教程

虽然cursor目前只支持英文但是它强大的代码联想能力以及问答能力&#xff0c;可以高效的提高编码效率。 如下步骤所有的前提是你的ubuntu上面已经安装了rust以及其必须的extensions。 1 下载 到官网https://www.cursor.com下载指定版本的软件。 下载到本地以后会生成如下软件…

如何通过网络找到自己想要的LabVIEW知识?

学习LabVIEW或其他编程技术时&#xff0c;无法依赖某一篇文章解决所有问题。重要的是通过多种途径获取灵感&#xff0c;并学会归纳总结&#xff0c;从而逐渐形成系统性的理解。这种持续学习和总结的过程是技术提升的基础。通过网络找到所需的LabVIEW知识可以通过以下几个步骤进…