JavaScript如何生成下载文件？同代码部分场景失效问题求解

同一段用于生成下载文件的JavaScript代码在部分页面可正常运行，在部分页面无法生效，阻塞前端开发进度，原实现代码如下：

var element = document.createElement('a'); 
element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(strOutput.replaceAll('£', '£'))); 
element.setAttribute('download',"fpversions"); 
element.style.display = 'none'; 
document.body.appendChild(element); 
element.click(); 
document.body.removeChild(element);

• 内容安全策略(CSP)拦截：部分页面配置了严格的CSP规则，默认禁止data:协议作为导航链接触发，基于data URI的下载逻辑会被浏览器直接拦截，这是该问题最常见的诱因。
• DOM生命周期不匹配：部分页面（尤其是单页应用路由页、动态加载的弹窗页）执行脚本时document.body尚未完成渲染，或元素刚挂载就被立刻移除，浏览器还未响应点击事件就销毁了DOM节点，导致下载触发失败。
• 运行环境权限限制：如果失效页面是被嵌入在设置了sandbox属性的iframe中，且未配置allow-downloads权限，a标签的download属性会被浏览器直接禁用；部分老旧WebView内核、企业级安全浏览器也会限制非用户直接触发的下载行为。
• 字符处理逻辑兼容性差：原代码硬编码替换英镑符号为HTML实体，若部分页面传入的strOutput已经做过实体转义，会出现二次转义问题，导致生成的data URI格式非法，被浏览器判定为无效链接。

• 替换data URI实现为Blob URL实现，从根源规避data协议的CSP拦截问题，Blob URL属于页面同源的内存引用，不受data协议的安全规则限制。
• 增加短延时触发逻辑，确保a元素挂载到DOM树后再触发点击，点击完成后延时移除元素、释放Blob URL，避免DOM节点过早销毁。
• 移除硬编码的特殊字符替换逻辑，生成Blob时统一指定UTF-8编码，由浏览器自动处理特殊字符转义，兼容不同页面传入的strOutput格式差异。
• 若页面运行在iframe中，检查iframe的sandbox属性配置，补充allow-downloads权限声明。

修复后的完整可兼容代码如下：

// 统一将内容转为UTF-8编码的Blob，无需单独处理特殊字符
const blob = new Blob([strOutput], { type: 'text/html;charset=utf-8' });
// 生成同源Blob URL
const url = URL.createObjectURL(blob);
const element = document.createElement('a');
element.href = url;
element.download = 'fpversions';
element.style.display = 'none';
document.body.appendChild(element);
// 触发点击
element.click();
// 延时移除元素、释放内存引用，兼容不同内核的事件响应时序
setTimeout(() => {
  document.body.removeChild(element);
  URL.revokeObjectURL(url);
}, 100);

内容的提问来源于stack exchange，提问作者rama rao