前端下载文件的5种方法(附加获取文件名)

正文

在前端站点上下载文件，这是一个极其普遍的需求，很早前就已经有各种解决方法了，为什么还写这么老的文章，只是最近在带一个新人，他似乎很多都一知半解，也遇到了我们必经问题之“不能下载txt、png等文件”的典型问题，我就给他总结下下载的几个方式。顺便分享出来，也许，真有人需要。

1. JavaScript下载文件

JavaScript下载文件是最简单、最直接的方法。只需要创建一个a标签，设置href属性为文件的URL，然后触发a标签的click事件即可。代码如下：

<a href="https://example.com/file.txt" download>下载文件</a>

<script>
  document.querySelector('a').click();
</script>

2. HTML下载文件

HTML下载文件与JavaScript下载文件类似，但不需要使用JavaScript代码。只需要创建一个a标签，设置href属性为文件的URL，然后设置download属性为文件的名称即可。代码如下：

<a href="https://example.com/file.txt" download="file.txt">下载文件</a>

3. iframe下载文件

iframe下载文件是另一种简单的方法。只需要创建一个iframe标签，设置src属性为文件的URL即可。浏览器会自动下载文件并将其保存在本地。代码如下：

<iframe src="https://example.com/file.txt"></iframe>

4. ajax下载文件

ajax下载文件需要使用JavaScript代码。首先，创建一个XMLHttpRequest对象，然后使用open方法打开一个HTTP GET请求。接下来，使用send方法发送请求。当服务器返回响应时，使用response属性获取文件的内容。最后，使用saveAs方法将文件保存到本地。代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file.txt', true);
xhr.send();

xhr.onload = function() {
  var blob = new Blob([xhr.response], {type: 'text/plain'});
  saveAs(blob, 'file.txt');
};

5. post数据下载文件

post数据下载文件也需要使用JavaScript代码。首先，创建一个表单，设置action属性为文件的URL，然后设置method属性为“POST”。接下来，在表单中添加一个input标签，设置type属性为“file”，并设置name属性为“file”。最后，使用submit方法提交表单。代码如下：

<form action="https://example.com/file.txt" method="POST">
  <input type="file" name="file">
  <input type="submit" value="下载文件">
</form>

<script>
  document.querySelector('form').submit();
</script>

获取文件名

在下载文件时，通常需要获取文件的名字。有两种方法可以获取文件名。

• 方法一：使用JavaScript代码。首先，创建一个a标签，设置href属性为文件的URL，然后使用getAttribute方法获取download属性的值。代码如下：

var a = document.createElement('a');
a.href = 'https://example.com/file.txt';
var filename = a.getAttribute('download');

• 方法二：使用HTML代码。首先，创建一个a标签，设置href属性为文件的URL，然后使用textContent属性获取a标签的内容。代码如下：

<a href="https://example.com/file.txt">下载文件</a>

<script>
  var filename = document.querySelector('a').textContent;
</script>

总结

以上是前端下载文件的5种方法，以及获取文件名的方法。希望对您有所帮助。