vue实现下载文件和图片功能

vue实现图片或文件下载功能

今天一个需求就是实现图片下载功能，刚开始以为很简单没有什么逻辑可写，就以为调用后端接口就可以了，调用之后发现有问题，看来还是没有想象的那么简单

1、要自己创建一个a标签，以下就是下载功能的实现

这里是调用接口之后如果code=200时进行下载

if (res.code == 200) {const link = document.createElement("a"); //自己创建的a标签link.href = res.data;document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(res.data);}

2、还有一种情况是下载单张图片，如果用上面方法会直接跳转到了图片链接，并不会实现下载。下面则是下载单张图片的方法

getUrlBase64(imgUrl) {return new Promise((resolve) => {let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");let img = new Image(); //允许进行跨域img.crossOrigin = "Anonymous";img.src = imgUrl;img.onload = function() {canvas.height = img.height; //图片的高度canvas.width = img.width;//图片的宽度ctx.drawImage(img, 0, 0, img.width, img.height);let dataURL = canvas.toDataURL("image/png");canvas = null;resolve(dataURL);};});},//点击下载图片按钮的事件handleDowondImg(url, name) {this.getUrlBase64(url).then((base64) => {const link = document.createElement("a");link.href = base64;link.download = this.$route.query.source;link.click();});},

vue实现下载文件和图片功能相关推荐

vue接入下载文件接口
vue接入下载文件接口后端接口返回字节数组或者文件流返回下载的文件时,前端使用vue接入下载文件的方法如下: 前端部分 1.前端下载文件方法 // obj:后端返回的的字节数组或者文件流:name: ...
爬虫框架Scrapy（10）下载文件与图片
文章目录下载文件与图片 (一)FilesPipeline 和 ImagesPipeline 1. FilesPipeline 使用说明 2. ImagesPipeline 使用说明 (二)项目实例: ...
[转]使用URLConnection下载文件或图片并保存到本地
Code import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
vue中下载文件导出保存到本地
vue中下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据 res.config.url 中是下载链接地 ...
Python爬虫之scrapy下载文件和图片
Python爬虫之scrapy下载文件和图片一:pipeline 二:使用scrapy下载图片 2.1 创建scrapy项目 1.2 创建爬虫 1.3 配置文件设置 1.4 编写启动文件 1.5 爬 ...
Vue 项目下载文件最佳解决方案
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群原文链接: https://juejin.cn/post/70628885824651919 ...
钉钉内置浏览器下载文件（钉钉跨域下载文件、图片等）
刚开始在网上查询到很多资料其中最为广泛的是用<a>download下载,但是会遇到图片.txt.MP4等文件无法下载被浏览器直接打开,后来尝试用blob的方法进行字节流转换,虽然成功了,但 ...
vue 如何下载文件（包含txt jpg pdf word）
闲聊: 问题:项目中的一个bug,使用a标签的href download 的下载功能,但是对于图片 .txt文件,浏览器能解析的文件,会直接展示出来. 征程:看了各种博客,什么乱七八糟的都有(a标签啦 ...

vue实现下载文件和图片功能

vue实现图片或文件下载功能

vue实现下载文件和图片功能相关推荐

最新文章

热门文章