vue 导出后端返回的二进制流文件

最新推荐文章于 2024-05-08 23:00:00 发布

爬坑的小白

最新推荐文章于 2024-05-08 23:00:00 发布

阅读量502

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ZJ15981837003/article/details/127547146

版权

1：导出按钮

<el-button type="primary"  size="small" @click="onExport"><el-icon><Download /></el-icon>导出Excel</el-button>

2:js

onExport(){
      const loading = ElLoading.service({
        lock: true,
        text: '导出中，请稍后！'
      })
      const data = {
        //参数
      }
      this.$axios({
        url:'http://*****',
        method:"post",
        data:filterParams(data),
        responseType: 'blob',
        headers: {
          'X-Access-Token': localStorage.getItem('token'),
        }
      }).then(res=>{
          // 转化为blob对象
          let blob = new Blob([res.data], {
            type: "application/octet-stream",
          });
          let filename = '登记记录' + '.xls'
          // 将blob对象转为一个URL
          var blobURL = window.URL.createObjectURL(blob);
          // 创建一个a标签
          var tempLink = document.createElement("a");
          // 隐藏a标签
          tempLink.style.display = "none";
          // 设置a标签的href属性为blob对象转化的URL
          tempLink.href = blobURL;
          // 给a标签添加下载属性
          tempLink.setAttribute("download", filename);
          if (typeof tempLink.download === "undefined") {
            tempLink.setAttribute("target", "_blank");
          }
          // 将a标签添加到body当中
          document.body.appendChild(tempLink);
          // 启动下载
          tempLink.click();
          // 下载完毕删除a标签
          document.body.removeChild(tempLink);
          window.URL.revokeObjectURL(blobURL);
          this.$message({
            message: "导出成功~",
            type: "success",
          });
        loading.close()
      })
    }