大连市城乡建设厅网站,网页美工设计教案网页元素设计,广州企业建站,优秀 网站设计 蓝色前言 导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成#xff0c;我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href…前言 导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事了。如果是放到服务器上,直接从服务器上下载就好了。下面我们使用另一种 H5 的新特性blob[1]对象来实现一下导出功能。什么是 Blob Blob() 构造函数返回一个新的 Blob 对象。 blob 的内容由参数数组中给出的值的串联组成。var aBlob new Blob( array, options );兼容性 mimeType[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, audio/x-wav},
{.wma, audio/x-ms-wma},
{.wmv, audio/x-ms-wmv},
{.wps, application/vnd.ms-works},
{.xml, text/plain},
{.z, application/x-compress},
{.zip, application/x-zip-compressed},
{, */*}
导出 我们需要调取接口来获取导出文件的内容,如果我们先后端分离的话我们需要接口给我们返回Buffer, Blob, DOMString类型的数据,DOMStrings会被编码为UTF-8。let blob new Blob([接口返回的数据], {type: application/vnd.ms-excel;charsetutf-8
});使用a标签,模拟点击a标签完成导出功能,通过URL.createObjectURL()[3]方法创建一个下载的链接地址,最后在不需要的时候URL.revokeObjectURL释放掉let downloadElement document.createElement(a);
let href window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href href;
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
文件名的设置 文件名称通过报文头设置content-disposition属性设置,Content-Disposition参数attachment --- 作为附件下载
inline --- 在线打开
setHeader(Content-Disposition,inline; filename文件名.mp3);
setHeader(Content-Disposition,attachment;filenametest.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;filenamexxx.xls, content-encoding: gzip, content-length: 1455, content-type: application/vnd.ms-excel;charsetUTF-8, …}
request: XMLHttpRequest {readyState: 4, timeout: 30000, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: OK
前端代码let blob new Blob([res.data], {type: application/vnd.ms-excel;charsetutf-8
});
let downloadElement document.createElement(a);
let href window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href href;
downloadElement.download
decodeURI(res.headers[content-disposition].split(filename)[1]
) || ; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
写在最后 导出功能多种多样,根据浏览器的不同和需求的不同会有不同的问题出现其中的坑还是比较多的,适合自己需求的才是最好的。参考资料[1] Blob: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob[2] mimeType: https://blog.csdn.net/weixin_33734979/article/details/84582017[3] createObjectURL: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL❤️ 爱心三连击1.如果觉得这篇文章还不错来个分享、点赞、在看三连吧让更多的人也看到2.关注公众号小丑的小屋定期为你推送好文和总结,一起学习一起进步。3.有什么问题和有错误的地方欢迎大家的留言和评论还有后续更新下期更加精彩
