[H5]使用JavaScript将字符串下载为文件

背景:

ACE是一个代码编辑器，可以嵌入到任何web页面或者JS应用程序中。在项目中使用了ACE作为示例代码在线运行工具，给用户调用API做代码示例指导。其中有一个功能是将示例代码用浏览器下载为html文件。起先想到的是写后端代码进行下载，不过这样有点繁琐。查阅资料发现在前端就可以做到了，而且非常的简单。

实现原理及代码：

<a href="/aa/test.jpg" download="test.jpg" ></a> // 并且可以指定文件名

前端资源下载，可以使用HTML5原生的download属性。

function (content, filename) {
  // 创建a标签
  var eleLink = document.creattElement('a')
  // 设置a标签 download 属性，以及文件名
  eleLink.download = filename
  // a标签不显示
  eleLink.style.display = 'none'
  // 获取字符内容，转为blob地址
  var blob = new Blob([content])
  // blob地址转为URL
  eleLink.href = URL.createObjectURL(blob)
  // a标签添加到body
  document.body.appendChild(eleLink)
  // 触发a标签点击事件，触发下载
  eleLink.click()
  // a标签从body移除
  document.body.removeChild(eleLink)
}

参考文章：

1，JS字符串转为文件并使用浏览器下载