likes
comments
collection

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

作者站长头像
站长
· 阅读数 23

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

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

背景

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

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

怎么办呢?

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

手动console.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);
}

实例

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

优点

简单方便,兼容性好。支持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);
  };
}

实例

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

优点

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

缺点

暂无。

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

写在最后

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