将列表导出成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)
    
上一篇:新冠病毒疫情模拟系统


下一篇:OpenGL代码学习(14)--了解正投影矩阵