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会直接预览）无法判断接口是否返回成功

1分钟了解js如何实现下载文件功能的4种方式相关推荐

js下载文件常用的两种方式
1.后端直接返回文件服务器地址,前端创建a标签模拟 export function downloadFileUrl (url, fileName) { const elink = document.c ...
关于PHP下载文件功能中header()书写方式
一.下载所用header头 header ( "Cache-Control: max-age=0" ); header ( "Content-Description: F ...
springboot ajax下载文件功能封装
通过js ajax下载文件功能封装 function exportExcel(formId, url) {try {var queryForm = $("#" + formId); ...
android ftp同步程序,ftp同步安卓，安卓手机ftp上传下载文件功能同步视频照片
手机拍照越来方便,手机里的照片也越积越多,手机运行缓慢,本文利用安卓的每步FTP服务APP来自动实现手机视频照片的同步,释放手机被占用的存储空间.在机顶盒上运行每步FTP服务,机顶盒USB口连接U盘做 ...
js ajax上传文件功能
js ajax上传文件功能 ajax请求 php接收文件(yii框架) ajax请求 <form enctype="multipart/form-data"><i ...
[js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码初始化看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
两台Linux主机之间文件传输的几种方式
Linux文件传输的五种方式 FTP : FTP是文件服务器,可实现文件的上传下载,存储等功能,但本文不打算介绍ftp的使用. scp: scp能够将不同主机的文件进行相互传输,使用简单方便. rz ...
sass文件编译的三种方式【舒】
[舒:]sass文件编译的三种方式方式一: 1.webstorm打开evtGulp项目或者mcake-activity项目 2.中,开启gulp->default/develop,启动watc ...
linux两种方式改变文件权限,Linux更改文件权限的两种方式
今天小编要跟大家分享一篇关于Linux更改文件权限的方式,喜欢Linux的小伙伴来看一看吧. 我们知道·Linux系统最主要的特点之一就是--Linux系统是多用户.多任务的操作系统. 何为多用户?就 ...

1分钟了解js如何实现下载文件功能的4种方式

1分钟了解js如何实现下载文件功能的4种方式相关推荐

最新文章

热门文章