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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情。

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

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

背景

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

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

怎么办呢？

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

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

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

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

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

思路

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

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

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

方案一：利用<a>和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容纳不了太长的字符串。针对大文件、大量数据，本方案就无能为力了。

方案二：利用<a>和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个专栏里分享：《教你做小游戏》、《极致用户体验》。