JavaScript教程:快速下载文件244


JavaScript中的download属性允许您在浏览器中创建可下载的文件链接。用户点击链接后,浏览器将提示保存文件。这对于创建下载按钮或导出数据到文件非常有用。

设置download属性

要设置download属性,可以使用以下语法:

在上面的示例中,href属性指定要下载的文件的URL。download属性设置了下载的文件的名称。当用户点击链接时,浏览器将提示用户保存名为的文件。

使用JavaScript动态设置download属性

您还可以使用JavaScript动态设置download属性。这对于根据某些条件或输入来创建可下载文件非常有用。以下示例演示了如何使用JavaScript设置download属性:
// 获取下载链接
var link = ("download-link");
// 设置文件的名称
= "";
// 设置文件的URL
= "/path/to/";


在上面的示例中,JavaScript代码获取下载链接元素并设置其download和href属性。当用户点击链接时,浏览器将提示用户保存名为的文件。

使用下载锚

如果您不想使用

在上面的示例中,href属性包含数据URI,其中包含嵌入的文本“Hello world!”。download属性设置了下载的文件的名称。当用户点击链接时,浏览器将提示用户保存名为的文本文件,其中包含文本“Hello world!”。

自定义下载头

您可以使用XMLHttpRequest(XHR)对象自定义下载文件的HTTP头。以下示例演示了如何使用XHR对象自定义下载头:
// 创建一个新的XHR对象
var xhr = new XMLHttpRequest();
// 设置请求的类型和URL
("GET", "/path/to/");
// 设置请求头
("Content-Type", "text/plain");
// 设置下载文件名
= "blob";
// 监听响应事件
= function() {
// 创建URL对象
var url = ();
// 创建下载链接
var link = ("a");
= url;
= "";
// 点击下载链接
();
// 撤销URL对象
(url);
};
// 发送请求
();


在上面的示例中,JavaScript代码创建一个XHR对象并设置请求的类型和URL。然后,它设置请求头并指定响应类型为blob。当请求完成时,回调函数创建URL对象并设置下载链接的href和download属性。点击下载链接后,浏览器将提示用户保存名为的文件。

2024-12-20


上一篇:如何用 JavaScript 获取页面地址

下一篇:如何计算 JavaScript 字符串的长度