请求一个后端接口
返回一张图片(打印后发现是二进制流)
瞬间不开心了(为什么不能后端处理好再让前端调用呢)
不过丝毫不慌好吧
先说处理逻辑:首先要将获取到的数据转换,这边选择以blob形式进行转换
主要代码 responseType: 'blob'
话不多说,直接上代码(声明一下:这是在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)我就是忘了把这条写进去 爱心小贴士 : 冬天了,你有女朋友暖手了吗