vue下载图片常见问题，解决vue中下载同源图片、跨域图片，以及打包下载多个跨域图片

在网上查了很多资料，发现很多都是html+js，jquery实现图片下载的，于是整理了一份在vue中下载的方式，总结如下：

一、使用axios下载同源图片

原理：创建一个a标签并隐藏掉，将axios返回的图片路径赋值给href，a标签的dowmload属性不设置时浏览器会直接打开href路径，设置了之后会强制将文件下载下来，我们就用这一方式下载图片，加载完之后再将a标签移除，此方式只针对同源图片。

<el-button type="primary" @click="handleDownload(this.imgurl,'photo.jpg')">下载同源图片</el-button>

js代码：

import axios from 'common/js/axios'  // 引入配置的axios// imgUrl为图片路径，fileName为文件名
handleDownload(imgUrl, fileName){axios.get(imgUrl, { responseType: 'arraybuffer' }).then((res) => {const blob = new Blob([res.data])const blobUrl = window.URL.createObjectURL(blob)// 创建a标签并隐藏 设置标签属性为download时会强制下载const a = document.createElement('a')a.style.display = 'none'a.href = blobUrla.setAttribute('download', fileName)// 清除a标签document.body.appendChild(a)a.click()document.body.removeChild(a)window.URL.revokeObjectURL(blobUrl)})
}

二、创建canvas下载跨域图片

原理：当图片域名跟当前域名不同时，创建一个canvas，把图片转成base64的格式，再赋值给a标签，就可以下载了。

<el-button type="primary" @click="handleDownload(this.imgurl,'photo.jpg')">下载跨域图片</el-button>

js代码：

// 下载点击事件
handleDownload(this.imgUrl, 'photo.jpg').then(() => {this.$message.success('成功下载1张图片！')
})// 下载图片
downloadImg(imgsrc, fileName) {let image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')image.onload = function() {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据let a = document.createElement('a') // 生成一个a元素let event = new MouseEvent('click') // 创建一个单击事件a.download = fileName || 'photo' // 设置图片名称a.href = url // 将生成的URL设置为a.href属性a.dispatchEvent(event) // 触发a的单击事件}image.src = imgsrcreturn Promise.resolve()
}

三、将多个图片打包成zip，下载下来

用到的插件：

npm install jszip

npm install file-saver

<el-button type="primary" @click="handleDownloadAll(this.imgList)">下载所有图片</el-button>

js代码：

    // 引入插件import JSZip from 'jszip'import { saveAs } from 'file-saver'// 批量下载图片handleDownloadAll(imgList) {const that = thisvar imgBase64 = []var imageSuffix = [] // 图片后缀var zip = new JSZip()var img = zip.folder('文件夹名')for (var i = 0; i < imgList.length; i++) {// 获取每个图片的后缀var suffix = imgList[i].substring(imgList[i].lastIndexOf('.'))imageSuffix.push(suffix)this.getBase64(imgList[i]).then(base64 => {imgBase64.push(base64.substring(22))}, err => {console.log(err) // 打印异常信息})}function tt () {setTimeout(function () {if (imgList.length === imgBase64.length) {for (var i = 0; i < imgList.length; i++) {// 设置文件名img.file(i + imageSuffix[i], imgBase64[i], { base64: true })}zip.generateAsync({ type: 'blob' }).then(function (content) {// see FileSaver.jssaveAs(content, '压缩包名.zip')that.$message.success(`成功下载${imgList.length}张图片！`)})} else {tt()}}, 100)}tt()},getBase64 (img) {// width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小function getBase64Image (img, width, height) {var canvas = document.createElement('canvas')canvas.width = width || img.widthcanvas.height = height || img.heightvar ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL()return dataURL}return new Promise((resolve) => {var image = new Image()image.crossOrigin = 'Anonymous'image.src = imgif (img) {image.onload = function () {// 读取图片之后的操作resolve(getBase64Image(image))}}})},

vue下载图片常见问题，解决vue中下载同源图片、跨域图片，以及打包下载多个跨域图片相关推荐

vue重复路由_解决vue路由name同名,路由重复的问题
在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', compone ...
vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
vue index.php,如何解决vue $index报错问题
vue $index报错是因为vue已经移除了原来的$index和$key用法,变成了index和key,其解决办法就是修改$index和$key为index和key即可. 本教程操作环境:windo ...
天庭最牛系统推荐下载_围观RecSys2020 | 推荐系统顶会说了啥？(附论文打包下载)...
RecSys2020主页:RecSys – ACM Recommender Systems(https://recsys.acm.org/) 小编整理了RecSys2020的文章,其中包括41篇Lon ...
在PPT2007中制作礼花绽放动画效果ppt模板打包下载
家家户户都有除夕放烟花的习惯,尤其是一些小地方城市,过节礼花那是必不可少的. 毕业论文ppt背景放礼花可以增添节日的喜庆气氛,但是大家也需要注意自身安全,下面简单介绍一下礼花绽放动画效果的制作. 1. ...
vue产生二维码并且打包下载
在做一个二开项目,前端使用的vue element-ui. 需求要在列表里面展示二维码,并且可以批量打包下载. 首先我们能确定在接口里面返回的是二维码链接展示二维码 1. 在el-table中加入 ...
git的镜像下载地址，解决下载慢的问题
想看更多算法题,可以扫描上方二维码关注我微信公众号"数据结构和算法",截止到目前我已经在公众号中更新了500多道算法题,其中部分已经整理成了pdf文档,截止到目前总共有800多页( ...
java文件下载功能代码（单文件下载、多文件批量打包下载）——普遍适用
一.前言程序员在做web等项目的时候,往往都需要添加文件上传.下载.删除的功能,有时是单文件,有时多文件批量操作,而这些功能的代码程序员可以自己收藏起来当成工具使用,这样,程序员在进行程序设计 ...
实现多个存储服务器上文件浏览器打包下载
关于本地文件zip打包返回给浏览器下载,这边有个很好的例子读取本地文件打包返回给浏览器下载,基本能解决的相关问题.而最近因为项目原因,打包返回给浏览器下载的是存储在fdfs上文件,然后对此代码修改了下 ...
缩放图片，解决bitmap 内存溢出out of memory的问题
缩放图片,解决bitmap 内存溢出out of memory的问题参考文章: (1)缩放图片,解决bitmap 内存溢出out of memory的问题 (2)https://www.cnblog ...

vue下载图片常见问题，解决vue中下载同源图片、跨域图片，以及打包下载多个跨域图片

一、使用axios下载同源图片

二、创建canvas下载跨域图片

vue下载图片常见问题，解决vue中下载同源图片、跨域图片，以及打包下载多个跨域图片相关推荐

最新文章

热门文章