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

发布时间:2022-07-23 发布网站:https://blog.csdn.net/weixin_46022934
前端之家收集整理的这篇文章主要介绍了前端如何实现文件下载(七种方法)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

系列文章目录


!!! 现在流行的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="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 和火狐浏览器 都会将图片和文档自动打开!!!

总结


以上是前端之家为你收集整理的前端如何实现文件下载(七种方法)全部内容,希望文章能够帮你解决前端如何实现文件下载(七种方法)所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。