前端如何实现文件下载(七种方法)

一、直接使用a标签下载文件(三种方法)

代码如下 (示例)： 解释: target="view_window"这个属性,浏览器将打开一个新的窗口，给这个窗口一个指定的标记“view_window”，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

第一种方法: 下载zip压缩文件 (前提是在同一个资源路径下)

<a href="1.zip" download="1.zip" target="view_window">下载</a>

第二种方法:下载 txt文件 (前提是在同一个资源路径下)

<a href="1.txt" download="1.txt" target="view_window">下载图片</a>

第三种方法: 指定网络地址下载

<a href="http://image.biaobaiju.com/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg" download="http://image.biaobaiju.com/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg" 
target="view_window">下载图片</a>

二、使用JavaScript(四种方法)

1.绑定点击事件

代码如下（示例）：

$('#d1').on('click', function() {
    var a = document.createElement('a');
    a.preventDefault();
    a.href = '1.txt';
    a.download = '1.txt';
    a.click()
});

2.指定location的href地址

代码如下（示例）：

$('#d2').on('click', function() {
    location.href = '1.txt';
});

3.使用form表单的下载文件

代码如下（示例）：通过创建form表单,然后给表单的action添加地址属性,最后提交表单, 达到下载文件的目的.

$('#d3').on('click', function() {
    var a = $('<form action=""></form>');
    a.attr('action', '1.jpg');
    $('body').append(a)
    console.log(a);
    a[0].submit()
});

4.使用saveAs(url)方法

代码如下（示例）：

$('#d4').on('click', function() {
    saveAs('http://image.biaobaiju.com/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg')
})

总结 以上7种方法。前四种大致都是原理相同,基本上都是(通过a标签的herf指定资源,然后通过download=‘’ 属性进行下载) 原文链接：blog.csdn.net/weixin_4602…