用JS在浏览器中创建下载文件

要在浏览器中创建并下载文件，可以通过以下步骤：

1. 创建Blob对象

在JavaScript中，Blob对象代表了一个不可变的、原始数据的类文件对象，可以用它创建一个新文件。

例如，以下代码将创建一个新的Blob对象：

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

这行代码创建了一个包含字符串“Hello, World!”的Blob对象，并且设定了它的MIME类型为“text/plain”。

1. 创建URL对象

要将Blob对象作为下载文件提供给用户，需要将它包装在URL对象中。这个URL对象可以用来指代Blob对象，并且可以用于下载。

例如，以下代码将创建一个URL对象：

const url = URL.createObjectURL(blob)

这行代码创建了一个包含Blob对象的URL对象，可以用于从浏览器中下载文件。

1. 创建下载链接

要让用户下载文件，需要将一个下载链接添加到DOM中。这个下载链接应该包含URL对象，并且应该被放置在一个<a>标签中。

例如，以下代码将在DOM中动态创建一个包含下载链接的<a>标签：

const link = document.createElement("a")
link.href = url
link.download = "hello.txt"
link.innerHTML = "Download File"

document.body.appendChild(link)

这行代码将创建了一个下载链接，其中地址为上面创建的URL对象所指代的文件内容，文件名为“hello.txt”，并且标签内的文本为“Download File”。

1. 触发下载

最后，要让用户下载文件，需要触发下载链接的点击事件。这个事件可以通过click()函数来执行。

例如，以下代码触发下载链接的点击事件，从而让用户下载文件：

link.click()

完整代码示例：

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

const url = URL.createObjectURL(blob)

const link = document.createElement("a")
link.href = url
link.download = "hello.txt"
link.innerHTML = "Download File"

document.body.appendChild(link)

link.click()

示例2：

给定一个动态生成内容的链接，并以此创建文件进行下载

const data = document.querySelector(".my-content").innerHTML.trim();
const blob = new Blob([data], { type: "text/html" });

const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "my-content.html";
link.innerHTML = "Download My Content";

document.body.appendChild(link);

link.click();

这段代码会对当前页面中class名为"my-content"的元素的内容进行下载。具体来说，它首先使用querySelector()函数找到相应的元素，并且提取出它的HTML内容。然后，根据这个内容创建了一个新的Blob对象，并且包装成URL，创建下载链接，并且使用click()函数触发下载。