axios+vue下載文件需求

vue 下載爲xls表格

axios.post(
        'a.bbb.cc/d/ee',//請求的url
        {
            'data':this.data//請求數據
        },
        {
            responseType:'blob'//服務器返回的數據類型{必填}
        }
        ).then((res)=>{
            //此處有個坑。這裏用content保存文件流,最初是content=res,但下載的test.xls裏的內容以下圖1,
            //檢查了下才發現,後端對文件流作了一層封裝,因此將content指向res.data便可
            //另外,流的轉儲屬於淺拷貝,因此此處的content轉儲僅僅是便於理解,並無實際做用=_=
            const content = res.data
            const blob = new Blob([content])//構造一個blob對象來處理數據
            const fileName = 'test.xls'//文件類型後綴能夠修改
 
            //對於<a>標籤,只有 Firefox 和 Chrome(內核) 支持 download 屬性
            //IE10以上支持blob可是依然不支持download
            if ('download' in document.createElement('a')) { //支持a標籤download的瀏覽器
              const link = document.createElement('a')//建立a標籤
              link.download = fileName//a標籤添加屬性
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob)
              document.body.appendChild(link)
              link.click()//執行下載
              URL.revokeObjectURL(link.href) //釋放url
              document.body.removeChild(link)//釋放標籤
            } else { //其餘瀏覽器
              navigator.msSaveBlob(blob, fileName)
            }
 
      }).catch((err)=>{
          console.log(err);
      })
複製代碼
相關文章
相關標籤/搜索