脚本宝典收集整理的这篇文章主要介绍了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：384754419，请注明来意。