本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(13)

2021-06(81)

2021-07(13)

2021-08(62)

2021-09(66)

前端文件流下载处理

发布于2021-10-05 21:09     阅读(922)     评论(0)     点赞(9)     收藏(5)


在这里插入图片描述

一,直接使用

 download() {
      const link = document.createElement("a");
      link.style.display = "none";
      //请求后台的具体地址
      link.href =
        "http://192.168.5.69:8000/api1/cardGiveBatchEntity/account/template/download";
      link.setAttribute("download", "文件名称.xlsx");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      }

二,vue中使用文件流进行下载(new Blob)

get请求获取

  axios({
        url: "/cardGiveBatchEntity/account/template/download",
        method: "get",
        //vue axios(下载文件流)设置返回值类型responseType:‘blob‘
        responseType: "blob", 
      })
        .then((res) => {
          console.log(res);
          //解析文件充blod中解析
          const url = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/vnd.ms-excel" })
          );
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "文件名称.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log(err);
        });

由于get可以如此用,

var params={ XX:xx, }
this.$axios.get('/XXX/XXX',{
    params: params,
    responseType: 'blob'
}).then(res => {
    console.log(res);
});

若是封装的话则使用:
在这里插入图片描述

post请求获取

   axios
          .post("/cardGiveBatchEntity/account/template/download", "", {
            headers: {},
            responseType: "blob",
          })
          .then((res) => {
            console.log(res);
            const url = window.URL.createObjectURL(
              new Blob([res.data], { type: "application/vnd.ms-excel" })
            );
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "文件名称.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            console.log(err);
          });

post封装的操作:
在这里插入图片描述

原文链接:https://blog.csdn.net/caoluotuo/article/details/120575707




所属网站分类: 技术文章 > 博客

作者:西小口到了吗

链接:http://www.qianduanheidong.com/blog/article/198114/e00bf5f17131a9f0121b/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容:(最多支持255个字符)