vue.js如何根据后台返回来的图片url进行图片下载
最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题:
这是后台返回来的json数据(防止泄露重要信息IP地址打码了):
我在html里的引用是这样的:
<a @click="downCom" >
下载执照
<i class="icon-down"></i>
</a>
vue.js方法里的下载图片方法:
downCom() {
let that = this;
this.$http.files().then(res => {
let hreLocal="";
hreLocal = res.data.data.url;
this.downloadByBlob(hreLocal,"营业执照") });
},
下面这个方法,可以直接拿去用,直接把你的图片url传给这个方法,就可以实现vue.js来下载图片了。
downloadByBlob(url,name) {
let image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = url
image.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob)
download(url,name)
// 用完释放URL对象
URL.revokeObjectURL(url)
})
}
},
调用的download(url,name)方法:
function download(href, name) {
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.href = href
eleLink.click()
eleLink.remove()
}
完成上面的代码后,即可实现图片下载,而不是图片浏览啦。
最后成功实现点击即可下载图片,效果图如下:
vue.js如何根据后台返回来的图片url进行图片下载的更多相关文章
- js循环处理后台返回的json数组
<script type="text/javascript"> function gongdan_search(elm){ var dangqian_value=$(e ...
- js前台遍历后台返回的Datatable数据
jsondata 后台返回的datatable ) { ; j < jsondata.length; j++) { jsondata[j]; }; }
- ajax页面跳转(后台返回的是一个url地址,或者自己传进去的是url地址)
function modifyMerchantInfo(merchant_code) { $.ajax({ url: '/intra/crm/merchant/OrderMgr.htm?method= ...
- vue.js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
- Vue 表格内容根据后台返回状态位填充文字
本文地址:http://www.cnblogs.com/veinyin/p/8534365.html Vue 做表格时我们常用的就是 v-for ,直接把 prop 绑定上去,但是如果表格内容需要我 ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
- vue 把后台返回的json拼接成excel并下载
先封装一下生成excel的方法 downfile.js export default { data() { return {} }, components: {}, created() { }, me ...
- 使用js处理后台返回的Date类型的数据
从后台返回的日期类型的数据,如果直接在前端进行显示的话,显示的就是一个从 1970-01-01 00:00:00到现在所经过的毫秒数,而在大多数业务中都不可能显示这个毫秒数,大多数都是显示一个正常的日 ...
- 杂项:Vue.js
ylbtech-杂项:Vue.js Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据 ...
随机推荐
- 脱壳0-FSG壳-详细流程
目录 @ 1 拿到当前加壳程序,用exeinfo/PeID 看一下信息 可以看出是很老的壳FSG. 分析: Entry Point : 000000154,熟悉PE结构的知道,入口点(代码)揉进P ...
- Docker 安装部署Sql Server
前言 在如今,容器化概念越来越盛行,.Net Core项目也可以跨平台部署了,那么思考下Sql Server能不能呢?当然是可以的啦.本文今天就是介绍Docker部署配置和连接Sql Server.本 ...
- Linux系统管理----账号与权限管理作业习题
1.创建/guanli 目录,在/guanli下创建zonghe 和 jishu 两个目录(一条命令) 创建目录:mkdir +目录 [root@localhost chen]#mkdir /guan ...
- umask 默认权限控制和特殊权限
权限简单介绍: 在Linux中,创建目录或者文件之后总会有默认的权限.共9个,分为三组.分别代表u.g.o(属主.属组.其他用户).r.w.x 也代表各自的权限. r:读 在文件中的权限代表次文件 ...
- 手机APP测试之Fiddler
之前测试基本上是web端,突然接手了一个要在指定pad上测试APP的任务,于是决定研究研究pad抓包.最开始考虑有jmeter进行抓包测试,发现抓不到(可能方法有问题,后续还需继续研究),然后用fid ...
- 自定义 EditText 样式
极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...
- jQuery插件之路(二)——轮播
还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了 ...
- SpringBoot 集成Jedis操作set
题外话: Redis是个有趣的东西,相信搞java的或多或少都会用到,面试时也总离不开问Redis,之前觉得redis只是用做缓存,飞快!也因为最初在封装底层的时候,使用Redisson,所以大部分都 ...
- Consul的反熵
熵 熵是衡量某个体系中事物混乱程度的一个指标,是从热力学第二定律借鉴过来的. 熵增原理 孤立系统的熵永不自动减少,熵在可逆过程中不变,在不可逆过程中增加.熵增加原理是热力学第二定律的又一种表述,它更为 ...
- cs231n---生成模型
1 生成模型的定义和分类 生成模型是一种无监督学习方法.其定义是给一堆由真实分布产生的训练数据,我们的模型从中学习,然后以近似于真实的分布来产生新样本. 生成模型分为显式和隐式的生成模型: 为什么生成 ...