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