vue批量打包下载图片

最新推荐文章于 2024-08-08 14:44:36 发布
最新推荐文章于 2024-08-08 14:44:36 发布
阅读量889 收藏 3
点赞数 2
分类专栏： 下载图片 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mosansui/article/details/118151697
版权
本文介绍如何利用Vue结合jszip库和file-saver库，实现批量图片的压缩与下载功能。通过JavaScript代码，将多个图片资源合并成一个zip文件，并提供用户下载。
摘要由CSDN通过智能技术生成

主要用到 jszip 和 file-saver

下载包!

npm install jszip --save
npm install file-saver --save

js部分`

methods: {
   
//downImg是点击事件!
    downImg() {
   
        var blogTitle = '打包图片';
        var zip = new JSZip();
        var imgs = zip.folder(blogTitle);
        var baseList = [];
        // 要下载图片的url
        var arr = ['./img1.png', './img2.png', './img3.png'];//这里数组内的图片,可以换成自己的图片u
最低0.47元/天 解锁文章
莫三岁
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue批量下载图片
Komorebi_00的博客
01-15 1700
【代码】Vue批量下载图片。
VUE如何实现批量下载多个文件并导出zip格式
weixin_58495461的博客
05-14 630
1、安装jszip和file-saver插件。4、在methods中定义方法。3、模拟fileList数组。
vue3实现文件批量下载并打包成zip文件
zll18317968611的博客
07-24 360
加粗样式@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展
vue将文件/图片批量打包下载zip的教程
01-18
vue将文件/图片批量打包下载 各种格式都可以,只要url能够打开或者下载文件即可. 1.通过文件的url,使用js的XMLHttpRequest获取blob 2.将blob压缩为zip 由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒 添加依赖 //npm install jszip //npm install file-saver 在页面的script中引入依赖 import JSZip from ‘jszip’ import FileSaver from ‘file-saver’ 代码 /**文件打包 * arr
vue将文件/图片批量打包下载
ldoit的博客
11-03 1848
安装插件 npm install jszip npm install file-saver 在vue文件中使用 import JSZip from'jszip' import FileSaver from'file-saver' 2.调用方法 //通过url 转为blob格式的数据 getImgArrayBuffer(url){ let _this=this; return new Promise((resolve, reject) => { /
前端实现批量导出图片并打包压缩功能
weixin_33859844的博客
02-21 1731
需求 管理后台需要批量导出二维码图片 实现难点 选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里 思路分析 1.先将选中二维码的地址存在一个数组中2.依次请求图片并将其下载3.后用jszip压缩文件4.最后用file-saver生成文件 实现 实现的代码如下 import axios from 'axios' import J...
Vue实现图片的批量打包下载功能
最新发布
m0_46893049的博客
08-08 113
首先需要下载npm依赖 jszip 和 file-saver。下边直接给出实际操作代码。
vue 批量下载图片（自动压缩之后下载）
记录常见的问题以及解决办法
04-17 1014
标题 vue 批量下载图片（自动压缩之后下载） 效果图： 之前写的时候找到的别人的方法 觉得很好用 就保存下来之后改造了一下 亲测有效： 话不多说直接代码： html代码： <!-- 我这个是在表格中的html --> </el-table-column> :label="$t('abnormalList[9]')" show-overflow-tooltip > <template
Vue 中批量下载文件并打包的示例代码
11-26
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import ...
vue生成word打包下载.zip
03-25
在本项目中，我们探讨的是如何利用Vue.js来生成Word文档并实现批量下载的功能。这个“vue生成word打包下载.zip”压缩包文件很可能是包含了一个示例项目或者代码库，用于演示这一特定功能的实现。 首先，Vue.js本身...
vue批量下载图片打包为压缩包
Zeng的博客
01-16 1199
【代码】vue批量下载图片打包为压缩包。
Vue下载图片和批量下载图片
qq_52441253的博客
08-02 929
批量下载图片
vue 批量下载照片，打包成zip
理想同学的博客
05-09 1052
vue使用jszip file-saver插件图片批量下载。
vue中下载多个文件打包为一个zip
qq_43627981的博客
12-21 4301
//下载依赖 // npm i axios, JSZip, FileSaver -s import axios from "axios"; import JSZip from "jszip"; import FileSaver from "file-saver"; const getFile = url => { return new Promise((resolve, reject...
【vue】vue将一批图片打包下载
想想挺好啊
12-09 780
【vue】vue将一批图片打包下载。
Vue 批量打包下载图片
qq_39146122的博客
07-01 1275
参考链接：js批量打包下载图片 依赖包：FileSaver.js【下载文件】，JSZip【打包】 安装依赖： npm install file-saver --save npm install jszip --save 为了保证代码的复用性，故将打包下载过程封装成一个js zipDownImage.js import JSZip from 'jszip' import FileSaver from "file-saver" /** * * @class UnpackAndDownImage *
vue3批量下载和单图下载（粘贴即用）
weixin_54645059的博客
02-26 1018
复制粘贴即用。 vue3下载图片和批量下载图片，使用jszip和file-saver， vue2可以直接拆解使用
Vue3 打包批量下载
09-16
Vue3打包批量下载可以通过以下步骤实现： 1. 首先，安装axios、jszip和file-saver这三个依赖： ``` yarn add axios yarn add jszip yarn add file-saver ``` 2. 然后，导入axios： ```javascript import axios from 'axios' ``` 3. 创建一个getFile函数，用于获取文件的blob数据： ```javascript const getFile = url => { return new Promise((resolve, reject) => { axios.get(url, { responseType: 'blob' }) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }) } ``` 4. 创建一个downloadFiles函数，用于批量下载文件： ```javascript const downloadFiles = async (urls, zipName) => { const zip = new JSZip() const promises = urls.map(url => { return getFile(url) .then(fileData => { const fileName = url.substring(url.lastIndexOf('/') + 1) zip.file(fileName, fileData) }) }) await Promise.all(promises) zip.generateAsync({ type: 'blob' }) .then(content => { saveAs(content, zipName) }) } ``` 5. 调用downloadFiles函数，传入文件的url数组和要生成的zip文件名： ```javascript const urls = ['url1', 'url2', 'url3'] const zipName = 'files.zip' downloadFiles(urls, zipName) ``` 这样，Vue3就可以通过以上步骤实现打包批量下载。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值