将列表导出成excel表格图片下载(vue中使用)

Posted 2021-05-25 sunshineG

下面方法是前后端配合完成的导出功能，即前端需要调用后端接口。
如果后端返回的是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)