將列表導出成excel表格、圖片下載(vue中使用)

下面方法是前后端配合完成的導出功能，即前端需要調用后端接口。
如果后端返回的是base64格式的url，需要先轉成二進制，再用blob處理；如果是文件流或二進制流，直接用blob處理即可。

功能1：將列表導出成excel表格(vue中使用)

實現方法：

• 1.調后端接口，將列表數據傳到后端

• 2.后端返回一個url地址，是base64格式的

• 3.封裝一個解碼方法，將base64格式的url轉成二進制

• 4.創建一個a標簽，把url賦給它的href屬性，再給它添加下載功能

      //一般項目中會把公共的方法都放在util.js中，這里先放在.vue文件的methods中使用
  		/**
           * @dataurl 后端返回的base64格式的url轉成二進制
           */
          dataURLtoBlob(dataurl){
              // 1解碼
              var bstr = atob(dataurl),
              // 2 創建長度為n的數組，初始化里面的相都為0，即[0,0,0,...]
              n = bstr.length,
              u8arr = new Uint8Array(n)
              while (n--){
                  urarr[n]=bstr.charCodeAt(n)
              }
              return new Blob([u8arr],{type:'application/vnd.ms-excel'})
          }
  

  // 先把數據list傳遞給后端
          exportDataList(){
              let params = {
                  dataList:this.dataList
              }
              let that = this
              api.exportMethod(params).then(res=>{
                  if(res.code==200){
                      let binaryFile = res.data.data,
                          blob = that.dataURLtoBlob(binaryFile),
                          url = window.URL.createObjectURL(blob),  //返回一個對象URL
                          link = document.createElement('link');
                      link.style.display = 'none'
                      link.href = url
                      link.setAttibute('id','downloadLink')
                      link.setAttibute('download','導出清單.xls')
                      document.body.appendChild('link')
                      link.click()
                      let objLink = document.getElementById('downloadLink')
                      document.removeChild(objLink)
                      window.URL.revokeObjectURL(url)
                  }
              })
  
          },
    	 
  

  功能2：圖片下載（后端返回的是二進制流）

                      let binaryFile = res.data.data,
                          blob = new Blob([binaryFile],type:'')
                          url = window.URL.createObjectURL(blob),  //返回一個對象URL
                          link = document.createElement('link');
                      link.style.display = 'none'
                      link.href = url
                      link.setAttibute('id','downloadLink')
                      link.setAttibute('download',this.downLoadFileName)
                      document.body.appendChild('link')
                      link.click()
                      let objLink = document.getElementById('downloadLink')
                      document.removeChild(objLink)
                      window.URL.revokeObjectURL(url)