接口返回图片，前端生成临时url实现展示、下载效果
请求一个后端接口
返回一张图片（打印后发现是二进制流）
瞬间不开心了（为什么不能后端处理好再让前端调用呢）
不过丝毫不慌好吧
先说处理逻辑：首先要将获取到的数据转换，这边选择以blob形式进行转换
主要代码 responseType: 'blob'
window.URL.createObjectURL
话不多说，直接上代码（声明一下：这是在vue中写的，原生js及其他框架注意修改）
HTML
<button @click="onexh()">获取</button>
<img :src="contimg" alt="假装有图" />
<button @click="download()"><button>下载</button></a>
JavaScript
data() {
return{
xboUrl：“url”， //接口地址
contimg:"",
filename:""
}
},
methods: {
onexh() { //展示
axios({
url: this.xboUrl,
method: "GET",
params: this.params,
responseType: "blob", //划重点了，这个很重要
}).then((res) => {
console.log(res); //打印返回结果
let blob = new Blob([res.data], { type: "image/jpeg" });
this.contimg = window.URL.createObjectURL(blob); //转换为blob格式
console.log("转换后地址", this.contimg);
this.filename = this.contimg.slice(50) //这里选择对名字进行一点小处理，也可以直接赋值
});
},
}
至此，展示效果实现
什么？下载？
别急，上面按钮都写了怎么可能不写方法
download(fileName = this.filename) { //this.filename就是下载文件的名字
let link = document.createElement("a"); //生成一个a标签
link.download = fileName || "defaultName";
link.href = this.contimg;
document.body.appendChild(link);
link.click();
// 移除
document.body.removeChild(link);
},
方法容易找到，其中一些小细节上最容易犯错误，比如在请求接口的时候
responseType: “blob”,可以说是非常重要了
（小声BB）我就是忘了把这条写进去
爱心小贴士 ： 冬天了，你有女朋友暖手了吗
