js脚本打开后怎么下载

使用JavaScript下载文件的方法：利用Blob对象、使用FileSaver.js库、使用a标签的下载属性。在开发中，最常用的方法是利用Blob对象。

一、利用Blob对象

Blob对象代表一个不可变的、原始数据的类文件对象。你可以使用Blob对象创建一个下载链接，并模拟点击该链接来下载文件。

1、创建Blob对象

你首先需要创建一个Blob对象。Blob对象可以包含文本、图像、HTML等类型的数据。以下是创建Blob对象的示例代码：

const data = new Blob(["Hello, world!"], { type: 'text/plain' });

2、创建下载链接

接下来，你需要创建一个下载链接，并将Blob对象作为下载的资源。使用JavaScript创建一个a标签，并设置其href属性为Blob对象的URL：

const url = URL.createObjectURL(data);
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
document.body.appendChild(a);
a.click();

3、清理URL对象

为了避免内存泄漏，在使用完URL对象后，需要释放它：

URL.revokeObjectURL(url);

二、使用FileSaver.js库

FileSaver.js是一个简单的JavaScript库，可以在客户端保存文件。它提供了一个saveAs方法，简化了文件下载的过程。

1、引入FileSaver.js

你可以通过CDN或者npm安装FileSaver.js。以下是通过CDN引入FileSaver.js的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

2、使用saveAs方法

引入FileSaver.js后，你可以使用saveAs方法下载文件：

const blob = new Blob(["Hello, world!"], { type: 'text/plain' });
saveAs(blob, "example.txt");

三、使用a标签的下载属性

HTML5引入了download属性，可以指定下载文件的名称。你可以使用a标签的download属性来实现文件下载。

1、创建下载链接

创建一个a标签，并设置其href属性为文件的URL，download属性为文件的名称：

<a href="data:text/plain;charset=utf-8,Hello%2C%20world!" download="example.txt">Download</a>

2、模拟点击下载

你可以使用JavaScript模拟点击下载链接：

const a = document.createElement('a');
a.href = 'data:text/plain;charset=utf-8,Hello%2C%20world!';
a.download = 'example.txt';
document.body.appendChild(a);
a.click();

四、总结

在这篇文章中，我们介绍了三种使用JavaScript下载文件的方法：利用Blob对象、使用FileSaver.js库、使用a标签的下载属性。最推荐的方法是利用Blob对象，因为它是最灵活和强大的。你可以根据实际需求选择合适的方法来实现文件下载。

使用Blob对象：这种方法最灵活，可以处理各种类型的数据，包括文本、图像、HTML等。创建Blob对象后，通过创建下载链接和模拟点击链接的方式实现文件下载。使用FileSaver.js库：这种方法最简单，只需引入库并使用saveAs方法即可实现文件下载。使用a标签的下载属性：这种方法最简单，只需创建a标签并设置其href和download属性即可实现文件下载。