對接口進行請求:

//導出excel表到桌面
getData.exportexcel = (data)=>{ 
  return http({
    method: 'post',
    url: baseUrl + '/exportexcel/',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    responseType: 'blob'
  })
}

對請求回來的數據進行方法下載和調用：

      exportexcel(){
        //打印報表
        url.exportexcel().then(res=>{
          console.log(res,this,'----------數據')
          this.download(res)
        })
        console.log('---------點擊按鈕')
      },
      download (data) {
          if (!data) {
              return
          }
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.id='Adownload'
          link.setAttribute('download', 'excel.xls') //命名可能會出現問題，格式一定和后端下載的格式一樣
          
          document.body.appendChild(link)
          link.click()
          document.getElementById('Adownload').remove();
      }

點擊下載按鈕進行下載操作

<div @click="exportexcel">左側屏幕</div>

總結

以上是生活随笔為你收集整理的vue实现文件下载功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。