7X24小时在线,建站仿站,提供空间域名及数据库,可淘宝交易!安全放心!

js实现文件下载功能

专职建站仿站2023-03-04 01:36:48530技术文章
<body>
	<button onClick="download()">a标签下载</button>
	<script>
		function download(url = 'http:www.xxx.com/download?name=file.pdf', fileName = '未知文件') {
	      const a = document.createElement('a');
	      a.style.display = 'none';
	      a.setAttribute('target', '_blank');
	      /*
	       * download的属性是HTML5新增的属性
	       * href属性的地址必须是非跨域的地址,如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口),这时download就会不起作用。
	       * 此时,如果是下载浏览器无法解析的文件,例如.exe,.xlsx..那么浏览器会自动下载,但是如果使用浏览器可以解析的文件,比如.txt,.png,.pdf....浏览器就会采取预览模式
	       * 所以,对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream,如果为application/pdf浏览器则会判断文件为 pdf ,自动执行预览的策略)
	       */
	      fileName && a.setAttribute('download', fileName);
	      a.href = url;
	      document.body.appendChild(a);
	      a.click();
	      document.body.removeChild(a);
	    }
	</script>
</body>


优点:

微信号:gaogaojie5
添加微信好友, 获取更多信息
复制微信号
  • 可以直接下载txt、png、pdf、exe、xlsx等类型文件

缺点:

  • a标签只能做get请求,所以url有长度限制

  • 无法获取下载进度

  • 跨域限制

  • 无法在header中携带token做鉴权操作

  • 无法判断接口是否成功

  • IE兼容问题

转载声明:本站发布文章及版权归原作者所有,转载本站文章请注明文章来源!

网友评论

复制成功
微信号: gaogaojie5
添加微信好友, 获取更多信息
我知道了
添加微信
微信号: gaogaojie5
添加微信好友, 获取更多信息
一键复制加过了