前端如何实现⽂件下载（七种⽅法）
系列⽂章⽬录
现在流⾏的chrom 和⽕狐浏览器 都会将图⽚和⽂档⾃动打开
提⽰：下⾯代码中会⽤到a标签中 target 会添加⼀个 view_window 的属性.
如果想要详细了解a标签的属性, 可以参考下⾯的连接(进⾏a标签target的学习)
标签之target属性----在何处打开链接
⽂章⽬录
⼀、直接使⽤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="image.biaobaiju/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg" download="image.biaobaiju/uploads/20180919/21/153 7362482-hQnIaqicdt.jpeg" target="view_window">下载图⽚</a>
⼆、使⽤JavaScript(四种⽅法)
1.绑定点击事件
代码如下（⽰例）：
$('#d1').on('click',function(){
var a = ateElement('a');
a.preventDefault();
a.href ='1.txt';
a.download ='1.txt';
a.click()
});
2.指定location的href地址
如何下载javascript
代码如下（⽰例）：
$('#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('image.biaobaiju/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg')
})
总结
以上7种⽅法。前四种⼤致都是原理相同，基本上都是(通过a标签的herf指定资源，然后通过download=’’ 属性进⾏下载) 现在流⾏的chrom 和⽕狐浏览器 都会将图⽚和⽂档⾃动打开

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。