1分钟快速了解js实现下载文件功能的4种方式
更新时间：2024年03月02日 10:01:05 作者：渣男语录
在前端开发中,我们经常需要实现文件下载功能,例如下载用户上传的图片、用户生成的文件等,这篇文章主要给大家介绍了关于如何通过1分钟快速了解js实现下载文件功能的4种方式,需要的朋友可以参考下
1、a标签下载 —可以直接下载txt、png、pdf、exe、xlsx等类型文件
downFile = (url) => {
const a = document.createElement('a');
a.style.display = 'none';
a.download = 'xx';
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
/*
* download: HTML5新增的属性
* url: 属性的地址必须是非跨域的地址
*/
};
2、new Blob 文件流下载
//fileName : 设置下载的文件名称
//filestream: 返回的文件流
const blob = new Blob([filestream], {type: 'application/vnd.ms-excel'});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 创建下载连接
a.href = href;
a.download = decodeURI(fileName );
document.body.appendChild(a);
a.click();
document.body.removeChild(a); // 下载完移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
3、window.open下载
window.open(url, '_self');
缺点：
会出现URL长度限制问题
需要注意url编码问题
无法获取下载进度
无法在header中携带token做鉴权操作
无法判断接口是否成功
无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
4、location.href 下载
window.location.href = url
缺点：
会出现URL长度限制问题
需要注意url编码问题
无法获取下载进度
无法在header中携带token做鉴权操作
无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
无法判断接口是否返回成功
总结
到此这篇关于js实现下载文件功能的4种方式的文章就介绍到这了,更多相关js下载文件功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS取得绝对路径的实现代码,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了js实现点击切换和自动播放的轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JavaScript异步forEach的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。这篇文章主要介绍了Javascript基础知识盲点总结之函数的相关资料2016-05-05
这篇文章主要为大家介绍了如何利用JS实现消消乐小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
下面小编就为大家带来一篇老生常谈 js中this的指向。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
今天小编就为大家分享一篇转换layUI的数据表格中的日期格式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了前端冒泡排序算法的相关资料,冒泡排序是一种简单的排序算法,通过比较相邻元素并交换位置,实现元素排序,该算法的时间复杂度为O(n^2),空间复杂度为O(1),具有稳定性,适用于小规模数据集和对稳定性要求高的场景,需要的朋友可以参考下2024-10-10
最近学习中遇到这个问题，为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！下面这篇文章主要介绍了利用原生javascript实现读写CSS样式的方法,需要的朋友可以参考下。2017-02-02
javascript匿名函数中的''return function()''作用
这篇文章主要介绍了javascript匿名函数中的'return function()'作用介绍,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
最新评论