美文网首页
vue+axios以流的形式下载文件

vue+axios以流的形式下载文件

作者: 阿羡吖 | 来源:发表于2019-11-14 17:56 被阅读0次
 <template>
    <div>
       <el-button type="text" size="small"   @click="handleDownLoadClick(scope.row)">下载</el-button>  
  </div>
</template>
<script>
  export default{
      methods:{
         handleDownLoadClick(data){
            axios({
               method:'get',
               url:url, //下载文件地址  
               data, //下载文件所需参数
              responseType: 'blob',   // 返回文件类型
          }).then((res) =>{
              if(res && res.data.code == 200){
                  const content = res;
                  const blob = new Blob([content])
                  const fileName = '导出文件.xlsx' //可以根据后台返回数据获取文件类型及名称
                if(window.navigator.msSaveOrOpenBlob){ //兼容IE10
                  navigator.msSaveBlob(blob,fileName);
                }else{
                  let url = window.URL.createObjectURL(blob);
                  let link = document.createElement('a')
                  link.style.display = ''none'
                  link.href= url;
                  link.setAttribute('download',fileName);
                  document.body.appendChild(link);
                  link.click()
                }
              }
          }).catch((err) =>{
            // 错误信息
          })
      }
    }
  }
</script>

相关文章

网友评论

      本文标题:vue+axios以流的形式下载文件

      本文链接:https://www.haomeiwen.com/subject/yrzrictx.html