天天看點

Vue.js使用Blob的方式實作excel表格的下載下傳(流檔案下載下傳)

// 導出
    handlerExportData(){
      getReportAllData({queryDate:this.time}).then(res=>{
        this.$Utils.exportExcel(res)
      })
    },

   /**
   * 導出excel文檔
   */
  exportExcel(data) {
    let a = document.createElement('a')
    a.download = data.filename
    a.style.display = 'none'
    //擷取請求傳回的response對象中的blob 設定檔案類型,這裡以excel為例
    let blob = new Blob([data.file], {type: 'application/vnd.ms-excel'})
    //建立一個臨時的url指向blob對象,建立url之後可以模拟對此檔案對象的一系列操作,例如:預覽、下載下傳
    a.href = URL.createObjectURL(blob)
    document.body.appendChild(a);
    a.click()
    document.body.removeChild(a);
  },