当图形验证码被后台使用图片流返回的时候，有种想骂爹的冲动。

最新推荐文章于 2023-04-11 14:19:01 发布

周搏

最新推荐文章于 2023-04-11 14:19:01 发布

阅读量2.4k

点赞数 1

分类专栏： javascript 文章标签： blob对象

本文链接：https://blog.csdn.net/web_youth/article/details/79103779

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当后台直接返回图片的时候，
很简单，把 img src=”路径”

后台接口封装返回图片流

axios({
   method: 'post',
     url: this.$api + 'fastdfs/downloadFile', // 请求地址
     data: {fileId:url} , // 参数
     responseType: 'blob' // 表明返回服务器返回的数据类型
 }).then(
     (res) => {
         let blob = new Blob([res.data], {type: "image/png"});
         let fileName = Date.parse(new Date())+".png" ;
         debugger
         if (window.navigator.msSaveOrOpenBlob) {
             navigator.msSaveBlob(blob, fileName);
         } else {
             var link = document.createElement('a');
             link.href = window.URL.createObjectURL(blob);
             link.download = fileName;
             link.click();
             window.URL.revokeObjectURL(link.href);
         }
     },)

后台接口封装返回表格`.xlxs`

axios({
    method: 'post',
      url: url, // 请求地址
      data: data, // 参数
      responseType: 'blob' // 表明返回服务器返回的数据类型
  })
  .then(response => {
        let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
        let fileName = "订单列表_"+Date.parse(new Date())+".xls" ;
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
        } else {
            var link = document.getElementById('download');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            window.URL.revokeObjectURL(link.href);
        }      
     })
  },err => {
      reject(err)
  })