zoukankan      html  css  js  c++  java
  • 将列表导出成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)
      
  • 相关阅读:
    低版本ie模式 360兼容模式的兼容性调节以及控制代码
    360浏览器兼容模式样式乱码的原因及解决办法
    iOS开发之UILabel
    代码大全--第六章--可以工作的类
    读书笔记--软件项目成功之道
    extern "C"的用法解析(转)
    基于Ubuntu 15.04 LTS编译Android5.1.0源代码 (转)
    Global.asax 文件是什么(转)
    设备扩展(DEVICE_EXTENSION)
    IRP_MJ_CREATE
  • 原文地址:https://www.cnblogs.com/lige1234/p/14807691.html
Copyright © 2011-2022 走看看