利用Blob,浏览器将后台传过来的json数据下载成文件

      前几天,做了个demo,后端返回给了我一长串json数据,需要我前端直接处理成文件下载,这个可以用Blob和a标签的download属性来做

//方法直接写在了vue的methods里面,当然用原生的js也可以
.....
methods:{
     download(){
           let postdata = new FormData();
           postdata.append("modelId",id)
           //调接口获取后台json数据
           this.$http.post("/download",postdata).then((res)=>{
               let data =JSON.stringify(res.data);
               let blob = new Blob([data],{type: 'text/plain;charset=UTF-8'}) ;
               let url = window.URL.createObjectURL(blob);
               let link = document.createElement('a');
               link.style.display = 'none';
               link.href = url;
               link.setAttribute('download', filename) ; //这里的filename就是指定浏览器生成的文件名
               document.body.appendChild(link);
               link.click(); //a标签自动触发点击事件
        }).catch((err)=>{
        })
}

      一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。
      数据类型 Blob 对象是在HTML5中,新增了File API。

你可能感兴趣的:(web前端)