前端导出功能实现的方法

1.通过点击链接(后端返回url)
window.location.href = url

2.解析后端返回的文件流

downOrder(){
let form ={}
this.$axios({
    method:'post',//请求方式
    headers:{
       'token':'this.token',
       'Content-Type': 'application/json;charset=UTF-8'
        },
        url: 'url',
        data:form,//请求参数
        responseType:'blob'//服务器返回的数据类型
     }).then(response=>{
     const content = response.data //返回的内容
     const fileName ='文件名称'+ '.xls'//下载文件名
     download(content,fileName)
     this.loading = false;
     }).catch(err=>{
         this.$message({
             type: 'error',
             message: '导出失败',
           });
            this.loading = false;
          });
 //处理下载流
 function download(content,fileName){
     const blob = new Blob([content]) //创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
     const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
     let dom = document.createElement('a')//设置一个隐藏的a标签,href为输出流,设置download
     dom.style.display = 'none'
     dom.href = url;
     dom.setAttribute('download',fileName)//指示浏览器下载url,而不是导航到它;因此将提示用户将其保存为本地文件
     document.body.appendChild(dom)
     dom.click()
  }                
}
posted @ 2022-04-28 14:54  小基狠努力啊  阅读(600)  评论(0编辑  收藏  举报