摘要:前几天做了一个功能,下载H5页面。开始的时候,我心想,下载一个内容,用的href标签就能搞定,然而并不是。当我用href做download某html的时候,打开了一个新的页面,并且是我要打开的页面(我用的是火狐浏览器)。后来百度大概知道,有很多种说法:1、有些浏览器不兼容href标签 2、href可以下载非html的内容,比如文本、excel,由于浏览器有自己的安全保护机制,所以不支持href下载。所以,我用下面的的方法,实现了html的下载功能。

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-js点击下载html页面的功能代码实现

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

前几天做了一个功能,下载H5页面。开始的时候,我心想,下载一个内容,用的href标签就能搞定,然而并不是。当我用href做download某html的时候,打开了一个新的页面,并且是我要打开的页面(我用的是火狐浏览器)。后来百度大概知道,有很多种说法:1、有些浏览器不兼容href标签 2、href可以下载非html的内容,比如文本、excel,由于浏览器有自己的安全保护机制,所以不支持href下载。所以,我用下面的的方法,实现了html的下载功能。

以下是js代码:

 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);   });  

 

html代码:

 <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";     }

前几天做了一个功能,下载H5页面。开始的时候,我心想,下载一个内容,用的href标签就能搞定,然而并不是。当我用href做download某html的时候,打开了一个新的页面,并且是我要打开的页面(我用的是火狐浏览器)。后来百度大概知道,有很多种说法:1、有些浏览器不兼容href标签 2、href可以下载非html的内容,比如文本、excel,由于浏览器有自己的安全保护机制,所以不支持href下载。所以,我用下面的的方法,实现了html的下载功能。

以下是js代码:

 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);   });  

 

html代码:

 <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";     }

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-js点击下载html页面的功能代码实现

全部内容,希望文章能够帮你解决

js实例教程-js点击下载html页面的功能代码实现

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过