js点击下载html页面的功能代码实现
程序员文章站
2022-06-27 14:34:54
前几天做了一个功能,下载h5页面。开始的时候,我心想,下载一个内容,用的href标签就能搞定,然而并不是。当我用href做download某html的时候,打开了一个新的页面,并且是我要打开的页面(...
前几天做了一个功能,下载h5页面。开始的时候,我心想,下载一个内容,用的href标签就能搞定,然而并不是。当我用href做download某html的时候,打开了一个新的页面,并且是我要打开的页面(我用的是火狐)。后来百度大概知道,有很多种说法:1、有些浏览器不兼容href标签 2、href可以下载非html的内容,比如文本、excel,由于浏览器有自己的安全保护机制,所以不支持href下载。所以,我用下面的的方法,实现了html的下载功能。
function fake_click(obj) { var ev = document.createevent("mouseevents"); ev.initmouseevent( "click", true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null ); obj.dispatchevent(ev); } function export_raw(name, data) { var appname = $("#name").val(); var urlobject = window.url || window.webkiturl || window; var export_blob = new blob([data]); var save_link = document.createelementns("https://www.w3.org/1999/xhtml", "a"); if (isfirefox = navigator.useragent.indexof("firefox") > 0 || navigator.useragent.indexof("msie") > 0) { save_link.href = urlobject.createobjecturl(export_blob); save_link.download = "运营商报告" + appname + ".html"; } else { save_link.download = "运营商报告" + appname + ".html"; } fake_click(save_link); } var content = document.getelementsbytagname('html')[0].outerhtml; var appuserid = $("#appuserid").val(); var url = feng.ctxpath + '/userinfo/getusermoresjmhinfov2/' + appuserid; console.log(content); $("#downloadoperatorreport").click(function () { export_raw(url, content); });
<p style="overflow:auto;" data-reactid="44"> <a href="#" download="运营商报告${userinfo.real_name}" id="downloadoperatorreport"> <button type="button" class="ant-btn sqp-w ant-btn-primary ant-btn-lg" data-reactid="45"> <i class="anticon anticon-download" data-reactid="46"> </i> <span data-reactid="47" style="color: #1ab9bb">导出报告</span> </button> </a> lt;/p>
但是遇到一种情况,就是当在360浏览器中做下载的时候,会出现下面的情况,两个下载弹出框。(两个弹出框重叠在一起,当点击一个“下载”后,发现下面还有一“新建下载任务”)
仔细观察,你会发现,一个是blob:https://形式的链接,一个是https://形式的链接。
原因分析:肯定是blob又自己新建了一个下载方式。
导致的原因:是下面的这条语句,可能是兼容性问题,360浏览器支持save_link.href下载方式,所以弹出两个下载框,一个是save_link.href,一个是save_link.download
save_link.href = urlobject.createobjecturl(export_blob); save_link.download = "运营商报告" + appname + ".html";
解决办法:我做了浏览器的判断,下面的这个语句,如果是火狐或者ie的话,走上面的这个语句,否则走下面的语句。虽然有种偷工减料,因为浏览器的内核远远不止这两种,但是在查询怎么判断是360浏览器的时候,在网上查询了很多方法都是不得而果,所以,对于360浏览器我只能用排除法了,对于其它浏览器的判断大家可以上网查看一下,我有时间再补。
if (isfirefox = navigator.useragent.indexof("firefox") > 0 || navigator.useragent.indexof("msie") > 0) { save_link.href = urlobject.createobjecturl(export_blob); save_link.download = "运营商报告" + appname + ".html"; } else { save_link.download = "运营商报告" + appname + ".html"; }