前端vue图片批量下载，导出zip压缩文件

先看看实现效果：

百度找的图片地址：

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticle-fd.zol-img.com.cn%2Ft_s998x562c5%2Fg5%2FM00%2F0A%2F02%2FChMkJltpVKGIQENcAAKaC93UFtUAAqi5QPdcOwAApoj403.jpg&refer=http%3A%2F%2Farticle-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639737146&t=96efdde36bc7cd05972cad237e23dae6%27

1、首先安装node_module插件

npm i jszip file-saver

2、导入插件

import { saveAs } from 'file-saver';

import JSZip from 'jszip'

3、代码实现

created(){
let arr = [{picName:'图片名字',picUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticle-fd.zol-img.com.cn%2Ft_s998x562c5%2Fg5%2FM00%2F0A%2F02%2FChMkJltpVKGIQENcAAKaC93UFtUAAqi5QPdcOwAApoj403.jpg&refer=http%3A%2F%2Farticle-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639737146&t=96efdde36bc7cd05972cad237e23dae6'}]this.zip(arr)
},methods:{zip (arr) {var zip = new JSZip();// 创建images文件夹var imgFolder = zip.folder("images");let flag = 0 //  判断加载了几张图片的标识for (let i = 0;i < arr.length;i++) {                  //遍历数组arrthis.getBase64(arr[i].picUrl).then(base64=>{  //调用getBase64()方法,传入图片网络地址得到base64数据base64 = base64.split('base64,')[1]imgFolder.file(arr[i].picName+ '.png', base64, { base64: true })//自定义图片名字，存进images文件夹里面if (flag === arr.length - 1) {zip.generateAsync({ type: "blob" }).then((blob) => {saveAs(blob, "压缩包名字.zip")//自定义文件压缩包名字})}flag++});}},//传入图片地址，返回base64格式数据getBase64(img){var image = new Image();image.crossOrigin = '*';//解决图片跨域问题image.src = img;return new Promise((resolve,reject)=>{image.onload = ()=>{resolve(this.getBase64Image(image));}}) },//创建画布，将图片渲染到画布上，再将画布转为base64格式数据返回出来
getBase64Image(img,width,height) {var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDataURL();return dataURL; },
}

前端vue图片批量下载，导出zip压缩文件相关推荐

通过php上传和下载rar/zip压缩文件
前端显示界面 <html> <head> <meta charset="utf-8"> <title>压缩文件上传下载</ti ...
vue项目无法下载导出的execel文件
问题:前端访问导出接口无法直接下载文件,而是输出了文件流原因:ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返 ...
前端下载流zip包,前端导出流压缩文件文件
今天遇到了个需求,需要从后端拿值下载zip压缩包到本地,后端给的格式是二进制流的,面对百度开发了下,发现都不大行,自己琢磨了下,写了个post下载的方法 import axios from 'axio ...
下载网页图片-批量下载网页图片软件免费
下载网页图片,今天给大家分享一款免费批量下载网页图片软件,支持任意格式的图片批量下载,只需要输入关键词或批量导入网页链接即可下载图片.批量下载任意网页上的图片,每个人都可以拥有各种高清图源.支持批量图 ...
Node.js meitulu图片批量下载爬虫1.051
原有1.05版程序没有断点续传模式,现在在最近程序基础上改写一版1.051. //====================================================== // m ...
java抓取网页数据_实现网络图片爬虫，只需5秒快速把整个网页上的图片全下载打包zip...
我们经常需要用到互联网上的一些共享资源,图片就是资源的一种,怎么把网页上的图片批量下载下来?有时候我们需要把网页上的图片下载下来,但网页上图片那么多,怎么下载我们想要的东西呢,如果这个网页都是我们想要 ...
SharePoint 2010 自定义Ribbon实现文档批量下载为Zip文件
在SharePoint 2010文档库中,结合单选框,在Ribbon中提供了批量处理文档的功能,比如,批量删除.批量签出.批量签入等,但是,很遗憾,没有提供批量下载,默认的只能一个个下载,当选择多个文 ...
Angular导出功能（excel导出功能、文件数据流导出功能、图片的下载导出功能）
Angular导出功能(excel导出功能.文件数据流导出功能.图片的下载导出功能) 场景1:(直接返回网络地址进行导出的excel) 后台返回的是 : "http://192.168.0. ...
【Chrome】图片批量下载扩展zzllrr Imager小乐图客V1.4 (支持正则表达式、自定义JS代码、自定义引擎、多网站取图规则)...
小乐图客 - Chrome浏览器图片批量下载工具,升级至V1.4 该版本实现的功能: 1.右下角集成众多网站引擎(相似图片搜索.图片搜索.网页搜索.图片上传等等). 2.选项中增加各类设置的重置.导入 ...

前端vue图片批量下载，导出zip压缩文件

前端vue图片批量下载，导出zip压缩文件相关推荐

最新文章

热门文章