本文主要是介绍前端如何实现文件下载(七种方法)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

系列文章目录

!!! 现在流行的chrom 和火狐浏览器 都会将图片和文档自动打开!!!

提示：下面代码中会用到a标签中 target 会添加一个 view_window 的属性.
如果想要详细了解a标签的属性, 可以参考下面的连接(进行a标签target的学习)
标签之target属性----在何处打开链接

文章目录

• 系列文章目录
• 一、直接使用a标签下载文件(三种方法)
• 二、使用JavaScript(四种方法)
• • 1.绑定点击事件
  • 2.指定location的href地址
  • 3.使用form表单的下载文件
  • 4.使用saveAs(url)方法
• 总结

一、直接使用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=’’ 属性进行下载)

!!! 现在流行的chrom 和火狐浏览器 都会将图片和文档自动打开!!!

这篇关于前端如何实现文件下载(七种方法)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！