使用 JavaScript 下载文件
在本文中,我们将学习如何使用 JavaScript 下载文件。自动下载文件可帮助我们使用 JavaScript 函数直接从 URL 检索文件,而无需联系任何服务器。我们将使用自定义的编写函数并使用 HTML 5 的下载属性来实现此目的。
当用户单击超链接时,HTML 5 中的 download
属性用于下载文件。它与锚标签-<a>
和 <area>
一起使用。我们需要设置 href
属性,以指定文件的来源。download
属性的值确定下载文件的名称。如果删除此值,则下载的文件名将与原始文件名相同。
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
在上面的代码中,我们使用 download
属性下载图像 apple.png
。我们首先创建包含图像地址的锚标签,然后向其添加 download
属性。然后,我们还创建了一个下载按钮,以方便下载文件。
这种方法将动态创建文本数据,然后使用 JavaScript 创建文本文件然后下载。
附加事件侦听器,以查找单击下载按钮的过程。使用文本区域中的文本和文本文件的文件名作为参数来调用下载功能。
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
在这种方法中,我们将使用 Axios
库下载文件。在继续介绍该方法的详细信息之前,让我们了解什么是 Blob
,这是用于使用 Axios 下载文件的数据类型。
Blob
代表 Binary Large Object
,是一种可以存储二进制数据的数据类型。它表示程序、代码片段、多媒体对象之类的数据,以及不支持 JavaScript 本机格式的其他内容。
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
在这里,我们从一个网站获得随机的图片,使用 Axios
来请求这些图片的 blob 形式,然后使用锚标签的 download
属性下载它们。与以前的方法一样,此方法不限于用户输入的纯文本。我们可以从 API 请求任何种类的数据,然后使用这种方法将数据保存在计算机内部。
除使用 Axios
库的方法外,所有主流浏览器均支持上述所有方法。Internet Explorer 仍然不支持本机 ES6 承诺,而 Axios 严重依赖它们。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。