js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创

实现将文本框的内容保存为本地文件可以使用 Blob + URL 或 FileSaver.js 两种方式来兼容多种浏览器。

使用 Blob + URL

1. 首先，获取文本框内容：

javascript
var text = document.getElementById('text').value;

1. 然后，新建 Blob 对象并设置 MIME 类型：

javascript
var blob = new Blob([text], {type: 'text/plain'});

其中，第一个参数是个数组，包含要保存的文本内容；第二个参数是可选的 MIME 类型，这里设为 text/plain。

1. 接着，判断浏览器是否支持 URL 对象：

javascript
if (window.URL != null) {
// 使用 URL.createObjectURL 创建 URL 地址。
} else {
// 使用 navigator.msSaveBlob 接口保存 Blob 对象到本地。
}

1. 如果支持，则使用 URL.createObjectURL 创建 URL 地址，并在页面上添加一个链接，让用户可以点击下载：

javascript
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'filename.txt'; // 保存的文件名
link.click();

1. 如果不支持，则使用 navigator.msSaveBlob 接口将 Blob 对象保存到本地：

javascript
navigator.msSaveBlob(blob, 'filename.txt');

使用 FileSaver.js

1. 首先，引入 FileSaver.js 库：

```html

```

1. 然后，获取文本框内容：

javascript
var text = document.getElementById('text').value;

1. 接着，新建 Blob 对象并设置 MIME 类型：

javascript
var blob = new Blob([text], {type: 'text/plain'});

1. 最后，使用 saveAs 函数将 Blob 对象保存到本地：

javascript
saveAs(blob, 'filename.txt');

其中，第一个参数是要保存的 Blob 对象，第二个参数是保存的文件名。

示例说明：

1. Blob + URL 实现方式示例：

```html

下载文件

```

1. 使用 FileSaver.js 示例：

```html

下载文件

```