[JS真好玩] 浏览器中执行JS，如何将某个长字符串存到本地文件里

携手创作，共同成长！

这是我的专栏​​《JS真好玩》​​，将教你用JS实现一些有趣的东西。JS可以直接在浏览器运行，可以很方便的跟我学习用JS做好玩儿的事情。感谢大家关注～文章求赞噢！祝大家早日变成一名「前端极客」！

欢迎阅读：本专栏最受欢迎文章​​《用JS找到哪个小坏蛋给我连点2次赞》​​。

背景

本专栏之前的一些文章，介绍了在浏览器中使用​​fetch​​函数可以获取很多很多有用的数据。

有时候，为了进一步分析，需要把这些数据导出到文件中。

怎么办呢？

浏览器为了安全性，不允许在浏览器JS执行环境内访问用户电脑上的文件。也就是说，没有像NodeJS里面的​​fs​​库可以方便的读写文件了。

手动​​onsole.log()​​后相关变量，然后复制粘贴到文件中，的确是一种思路。

但是当你需要导出到100个不同的文件，难道要手动复制100次吗？

显然上面的方式不够高效。

今天，我们介绍一种高效的方式，可以通过在浏览器中执行JS，把一些字符串保存到本地文件里。

思路

既然要把一段字符串保存到本地，是不是可以通过「下载」的方式完成呢？

我们在浏览器中构造一个文件，构造一个​​<a>​​​标签，存放那个文件，然后用户点击​​<a>​​标签下载即可。

又或者，我们可以调用​​element.click()​​自动触发点击，实现自动下载的效果。

方案一：利用和href

function download(filename, content) {
  const element = document.createElement('a');
  element.href = `data:text/plain;charset=utf-8,${content}`;
  element.download = filename;
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

实例

优点

简单方便，兼容性好。支持emoji表情。

缺点

文本长度有限，因为​​href​​容纳不了太长的字符串。针对大文件、大量数据，本方案就无能为力了。

方案二：利用和FileReader

function download(filename, content) {
  const arraybuffer = new TextEncoder().encode(content).buffer;
  const blob = new Blob([arraybuffer], { type: 'text/plain;base64' });
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = (event) => {
    const element = document.createElement('a');
    element.href = event.target.result;
    element.download = filename;
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };
}

实例

优点

支持较大的文件，弥补了方案一的缺点。同样也支持emoji。

缺点

暂无。

如果你发现了其它问题，欢迎在评论区指出。

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了​​《联机桌游合集》​​​，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了​​《合成大西瓜重制版》​​​。还开发了​​《Dice Crush》​​​参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：​​《教你做小游戏》​​​、​​《极致用户体验》​​。