// 下载图片
downPhoto (path) {
this.downloadFiles(path)
},
// 下载
downloadFiles (content) {
console.log(content)
const downloadElement = document.createElement('a') // 创建下载的链接
let blob = this.base64ToBlob(content) // new Blob([content]);
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = '参保人相片.jpg' // 下载后的文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 下载
document.body.removeChild(downloadElement) // 下载完成 移除 a
window.URL.revokeObjectURL(href) // 释放blob对象
},
// base64转blob
base64ToBlob(code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], {type: contentType})
},
<button  class="cancel-btn cursor" @click="downPhoto(dataDetail.photo64Byte)">下载图片</button>

js 前端不调接口直接下载图片的更多相关文章

  1. js 根据url 下载图片 前端js 实现文件下载

    1.H5 download属性 function downFile(content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createEl ...

  2. 前端下载图片的N种方法

    前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法. 先起个服务 使用expressjs起个简单 ...

  3. 一个失误导致微信下载图片接口Token失效

    公司的应用调了一个微信上传下载图片的接口,本来在线上跑的好好的,什么问题没有,但是这两天总是不定时的出现下载下来的图片损坏,拿着Token和serverid去接口测试网页验证,返回的是Token失效了 ...

  4. JS前端创建CSV或Excel文件并浏览器导出下载

    长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url.前端通过location.hre ...

  5. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  6. python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)

    1. 场景描述 一直做java,因项目原因,需要封装一些经典的算法到平台上去,就一边学习python,一边网上寻找经典算法代码,今天介绍下经典的K-means聚类算法,算法原理就不介绍了,只从代码层面 ...

  7. vue.js如何根据后台返回来的图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果都是跳着到一个新的图片网页,后来经过一番琢磨,终于解决了 ...

  8. js 根据url 下载图片

    downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...

  9. web前端性能调优

    最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...

随机推荐

  1. lua面向对象实现(实例化对象、继承、多态、多继承、单例模式)

    lua面向对象实现: 一个类就像是一个创建对象的模具.有些面向对象语言提供了类的概念,在这些语言中每个对象都是某个特定类的实例.lua则没有类的概念,每个对象只能自定义行为和形态.不过,要在lua中模 ...

  2. Pro Android学习笔记(一五四):传感器(4):陀螺仪、加速传感器

    文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处http://blog.csdn.net/flowingflying/以及作者@恺风Wei. 陀螺仪 陀螺仪(Gyr ...

  3. Visual Studio 调试卡顿的解决方法

    将不用的断点删除 关闭调试时打开的"IntelliXXX的窗口" 上面的第2条测试有效! https://social.msdn.microsoft.com/Forums/zh-C ...

  4. jzoj5988. 【WC2019模拟2019.1.4】珂学计树题 (burnside引理)

    传送门 题面 liu_runda曾经是个喜欢切数数题的OIer,往往看到数数题他就开始刚数数题.于是liu_runda出了一个数树题.听说OI圈子珂学盛行,他就在题目名字里加了珂学二字.一开始liu_ ...

  5. Kibana: Unknown error while connecting to Elasticsearch

    如果访问不通,可能是网络代理的问题,注意查看/etc/profile中是否设置了相关的代理. 注意修改代理后,应该执行 . /etc/profile 使配置文件立即生效.

  6. Quantitative proteomic analysis of small and large extracellular vesicles (EVs) reveals enrichment of adhesion proteins in small EVs (文献分享一组-柯酩)

    文献名:Quantitative proteomic analysis of small and large extracellular vesicles (EVs) reveals enrichme ...

  7. Django框架的安装,项目创建

    目录 Django框架的安装,项目创建 方法安装 Django版本选择 1.11.21(最新LTS版) django管理目录 命令行创建项目 django项目 命令行启动 (必须在项目文件下执行) p ...

  8. D. Pair Of Lines( Educational Codeforces Round 41 (Rated for Div. 2))

    #include <vector> #include <iostream> #include <algorithm> using namespace std; ty ...

  9. jvm 字节码查看

    javap -c -v HelloWorldDemo.class >HelloWorld.txt

  10. Python 去除列表中重复的元素(转载http://blog.csdn.net/zhengnz/article/details/6265282)

    比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a']l2 = list(set(l1))print l2   还有一种据说速度更快的,没测试过两者的速度 ...