Firefox无法实现<div>内容HTML下载？求跨浏览器兼容解决方案

嘿，这个问题我碰到过！Firefox对直接用data URI配合download属性的下载方式有不少限制，尤其是当内容体积稍大的时候，而且直接调用link.click()有时候会被浏览器的安全机制拦截，导致无法触发下载。咱们换成用Blob对象来实现，这是现代浏览器都支持的可靠方案，能完美兼容Chrome和Firefox。

问题原因分析 #

你原来的代码用了data:text/html;charset=utf-8,...这种格式的URI来创建下载链接，但Firefox对data URI的download属性支持有限，同时直接模拟点击动态创建的a标签，在Firefox中可能因为没有将元素添加到DOM中而无法生效。

修正后的完整代码 #

JavaScript部分

$(window).load(function(){
  function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var mimeType = mimeType || 'text/html';
    
    // 创建Blob对象存储HTML内容
    var blob = new Blob([elHtml], { type: mimeType + ';charset=utf-8' });
    var link = document.createElement('a');
    
    // 使用URL.createObjectURL生成Blob的临时链接
    var url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    
    // 为了兼容Firefox，需要将链接添加到DOM中再触发点击
    document.body.appendChild(link);
    link.click();
    
    // 清理临时URL和DOM元素
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }

  var fileName = 'invo.html';
  $('#downloadLink').click(function(e){
    e.preventDefault(); // 阻止默认的a标签跳转行为
    downloadInnerHtml(fileName, 'Invoice','text/html');
  });
});

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Invoice">
  CONTENT GOES HERE
</div>
<a href="#" id="downloadLink">Download</a>

关键修改点 #

• 用Blob对象替代data URI来存储HTML内容，这是现代浏览器标准的文件处理方式，兼容性更好
• 使用URL.createObjectURL()生成Blob的临时下载链接，比data URI更稳定，支持更大体积的内容
• 将动态创建的a标签添加到DOM中再触发点击，解决Firefox中无法触发下载的问题
• 点击后及时清理临时URL和DOM元素，避免内存泄漏
• 增加e.preventDefault()来阻止a标签的默认跳转行为，不需要再在HTML里写onclick="return false;"

这样修改后，代码就能在Chrome和Firefox中都正常触发HTML内容的下载了，而且对其他现代浏览器（比如Edge、Safari）也有很好的兼容性。

内容的提问来源于stack exchange，提问作者Cody Coderson