iPhone Safari下JavaScript实现txt文件预览下载无响应的解决方法

使用JavaScript实现txt文件的生成与下载功能时，在iPhone的Safari浏览器上点击按钮没有任何响应，无法触发预览或下载。

测试环境：

• 移动设备：iPhone 7 plus
• 浏览器：Safari
  需求是让下载按钮同时支持预览和下载功能。

原有问题代码 #

<script>
function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}
</script>
<button onclick="download('9591.txt','test')">download</button>

最终兼容代码 #

原有实现使用Data URL的形式存在移动端Safari兼容性限制，改用Blob对象结合URL.createObjectURL的方式即可解决问题，注意Blob构造函数第一个参数需要传入数组格式：

const data = "test";
const blob = new Blob([data], {type: "text/plain"});
const fileName = "your.txt";
const element = document.createElement('a');
element.href = window.URL.createObjectURL(blob);
element.download = fileName;
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
window.URL.revokeObjectURL(element.href);

内容的提问来源于stack exchange，提问作者leo.lin