前端JS将长字符串保存到本地文件的两种方法

2023-09-18 07:22:40

在前端开发中，有时需要将一些数据临时存储在本地，以便以后使用。如果数据量较小，可以使用浏览器的本地存储（localStorage）或会话存储（sessionStorage）来保存。但是，如果数据量较大，则需要使用其他方法来保存。

本文介绍了两种使用JavaScript在浏览器中将长字符串保存到本地文件的方法，分别通过标签的href属性触发下载以及使用FileReader生成文本文件来实现。

通过 标签的href属性触发下载

function downloadString(text, filename) {
  var a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
  a.download = filename;
  a.click();
}

这种方法很简单，只需创建一个标签，并将href属性设置为要下载的文件的URL。然后，将download属性设置为要保存的文件名。最后，调用click()方法来触发下载。

使用FileReader生成文本文件

function downloadString(text, filename) {
  var blob = new Blob([text], { type: 'text/plain' });
  var reader = new FileReader();
  reader.onload = function() {
    var a = document.createElement('a');
    a.href = reader.result;
    a.download = filename;
    a.click();
  };
  reader.readAsDataURL(blob);
}