ba64格式转换成普通png格式
<template>
//这⾥⽤的element-ui button组件
<el-button type="info" plain size="mini" @click="imgshow">点击展⽰后台传的ba64图⽚</el-button>
//弹窗，展⽰图⽚
<p class="qrcode" v-show="tupxs==true">
<img :src="_img" alt="" >
<a :href="downloadUrl":download="downloadfilename"class="djxzdbd">
<el-button>点击下载到本地</el-button>
</a>
<el-button type="info" @click="bxz">关闭</el-button>
</p>
</template>
export default{
data(){
return{
_img:'',
tupxs:fal,
downloadUrl:null,
downloadfilename:null
}安时处顺
},
methods:{
imgshow(){
//要⽤axios和qs 在npm先安装在此不多赘述
const axios =require('axios')
const qs =require('qs')
蓝天的拼音const _this =this
axios({
method:'post',
url:'后台的接⼝',
七月半是什么节日data: qs.stringify({
后台接⼝要的参数
})
})
.then(function(res){
股票pevar image = res.data;//后台返回的ba64⽂件
_this._img='data:image/png;ba64,'+ image//在ba64⽂件前加“'data:image/png;ba64,' ”可以在页⾯上显⽰图⽚，但是⽂件仍然不是png格式 _this.downLoadImage(_this._img)//这⼀步，将⽂件转成png格式
_this.tupxs =true
})
},
//ba64格式转换png
downLoadImage(imgUrl){
庞太师let timestamp =new Date().getTime()
let name = imgUrl.substring(22,30)+ timestamp +'.png'
this.downloadUrl = imgUrl
this.downloadfilename = name发展的反义词
},
}
}
<style>
桂枝尖
.qrcode {
position: fixed;
border:1px solid #e1e1e1;
margin:0 auto;
top:0;
left:0;
background:rgba(0,0,0,0.7);
width:100%;
width:100%;
height:100%
}
.qrcode img {
width:300px;
background-color: #fff; padding:6px;以案促改工作总结
box-sizing: border-box;
display: block;
margin:0 auto;
margin-top:10%;
margin-bottom:10px; }
.djxzdbd {
text-decoration: none; padding-top:10px;
margin-right:15px
}
</style>
