什么是BlobBlob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值的串联组成。varaBlob=newBlob(数组,选项);CompatibilitymimeType[2]在Blob构造函数中,options参数接受一个参数type,代表媒体类型,告诉浏览器它是什么类型的文件。常见的是{".3gp","video/3gpp"},{".apk","application/vnd.android.package-archive"},{".asf","video/x-ms-asf"},{".avi","video/x-msvideo"},{".bin","application/octet-stream"},{".bmp","image/bmp"},{".c","text/plain"},{".class","application/octet-stream"},{".conf","text/plain"},{".cpp","text/plain"},{".doc","application/msword"},{".docx","application/vnd.openxmlformats-officedocument.wordprocessingml.document"},{".xls","application/vnd.ms-excel"},{".xlsx","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},{".exe","application/octet-stream"},{".gif","image/gif"},{".gtar","application/x-gtar"},{".gz","application/x-gzip"},{".h","text/plain"},{".htm","text/html"},{".html","text/html"},{".jar","application/java-archive"},{".java","text/plain"},{".jpeg","image/jpeg"},{".jpg","image/jpeg"},{".js","application/x-javascript"},{".log","text/plain"},{".m3u","audio/x-mpegurl"},{".m4a","audio/mp4a-latm"},{".m4b","audio/mp4a-latm"},{".m4p","audio/mp4a-latm"},{".m4u","video/vnd.mpegurl"},{".m4v","video/x-m4v"},{".mov","video/quicktime"},{".mp2","audio/x-mpeg"},{".mp3","audio/x-mpeg"},{".mp4","video/mp4"},{".mpc","application/vnd.mpohun.certificate"},{".mpe","video/mpeg"},{".mpeg","video/mpeg"},{".mpg","video/mpeg"},{".mpg4","video/mp4"},{".mpga","audio/mpeg"},{".msg","application/vnd.ms-outlook"},{".ogg","audio/ogg"},{".pdf","application/pdf"},{".png","image/png"},{".pps","application/vnd.ms-powerpoint"},{".ppt","application/vnd.ms-powerpoint"},{".pptx","application/vnd.openxmlformats-officedocument.presentationml.presentation"},{".prop","text/plain"},{".rc","text/plain"},{".rmvb","audio/x-pn-realaudio"},{".rtf","application/rtf"},{".sh","text/plain"},{".tar","application/x-tar"},{".tgz","application/x-compressed"},{".txt","text/plain"},{".wav","音频/x-wav"},{".wma","音频/x-ms-wma"},{".wmv","音频/x-ms-wmv"},{".wps","应用程序/vnd.ms-works"},{".xml","text/plain"},{".z","application/x-compress"},{".zip","application/x-zip-compressed"},{"","*/*"}export我们需要调用接口获取导出文件的内容,如果前后端分离,需要接口返回给我们Buffer,Blob,DOMString类型数据,DOMStrings会被编码为UTF-8letblob=newBlob([接口返回的数据],{type:"application/vnd.ms-excel;charset=utf-8"});使用a标签模拟点击a标签完成导出功能,通过URL.createObjectURL()[3]方法创建下载链接地址,最后URL.revokeObjectURL在不需要的时候释放letdownloadElement=document.createElement("a");lethref=window.URL.createObjectURL(blob);//创建下载链接downloadElement.href=href;document.body.appendChild(downloadElement);down??loadElement.click();//点击下载文档.body.removeChild(downloadElement);//下载完成后移除元素window.URL.revokeObjectURL(href);//通过消息头的content-disposition属性设置释放blob对象文件名的设置文件名,Content-Disposition参数:attachment---downloadasanattachmentinline---openonlinesetHeader("Content-Disposition","inline;filename=filename.mp3");setHeader("Content-Disposition","attachment;filename=test.xls");前端通过拦截消息头中的content-disposition字段获取文件名:downloadElement.download=decodeURI(res.headers["content-disposition"].split("filename=")[1])||"";//下载后文件名的完整代码这里res代表数据后台返回:config:{url:"/ExportExcel",method:"post",data:"",headers:{...},baseURL:"/api/",...}data:Blob{size:5120,type:"application/vnd.ms-excel"}headers:{connection:"close",content-disposition:"attachment;filename=xxx.xls",content-encoding:"gzip",content-length:"1455",content-type:"应用程序/vnd.ms-excel;charset=UTF-8",...}request:XMLHttpRequest{readyState:4,timeout:30000,withCredentials:false,upload:XMLHttpRequestUpload,onreadystatechange:?,...}status:200statusText:"OK"前端代码letblob=newBlob([res.data],{type:"application/vnd.ms-excel;charset=utf-8"});letdownloadElement=document.createElement("a");lethref=window.URL.createObjectURL(blob);//创建下载的链接downloadElement.href=href;down??loadElement.download=decodeURI(res.headers["content-disposition"].split("filename=")[1])||"";//下载后文件名document.body.appendChild(道nloadElement);down??loadElement.click();//点击下载document.body.removeChild(downloadElement);//下载完成后移除元素window.URL.revokeObjectURL(href);//释放blob对象并写入endtoexportmorefunctions有很多种,根据不同的浏览器,不同的需求会有不同的问题。坑还是很多的,适合自己需求的才是最好的。
