JS实现文件下载的几种方法

JS 实现下载功能的几种方法

敬你一杯毒鸡汤解解渴：
人生三大真理：暴力真的可以解决一切，帅真的可以当饭吃，有钱真的可以为所欲为。

本文主要讲述的是已知一个文件在服务器的地址（即后端提供的下载接口），在页面上怎么实现点击按钮下载的问题。

分析一下我所知道几种办法吧：

HTML的a标签
```
<a href="url" download="">点击下载</a>
```
这是最直观也是最常用的方法了，a标签按需求设置样式就行了。

但是！注意了：a标签大家都知道代表超链接的意思，如果url指向的是一个浏览器可以解析的文件比如png，gif，txt，html，pdf文件等，浏览器会默认打开文件，而不是下载。
虽然download属性会规定被下载的超链接目标，但是这个属性是HTML5的新属性，而且兼容行不好，目前只兼容谷歌和火狐相对高版本的浏览器。所以使用时要注意你下载的文件类型。
点击按钮后，通过js实现下载
```
<input type="button" onclick="downloadFile()">点击下载</a>
```
方法一：还是a标签，通过js动态生成a标签
```
  function downloadFile () {let domA = document.createElement('a'); // js创建a标签domA.setAttribute('download', ''); // 给a标签设置download属性domA.setAttribute('href', url); // 给a标签href属性赋值为要下载文件的路径domA.click(); // 点击下载}
```
这个方法原理和页面的a标签是一样的。

方法二： window.open()
```
   function downloadFile () {window.open(url);}
```
代码非常简单哈，但是非常不推荐，因为window.open被触发时会先打开一个空白页面，然后关闭这个空白页面后，才会执行下载。体验很差呦~

方法三：通过表单提交完成下载
```
    function downloadFile () {let domForm = document.createElement('form'); // 创建一个form表单元素domForm.setAttribute('method', 'get'); // 设置请求方式为getdomForm.setAttribute('action', url); // 设置action属性为文件下载路径document.body.appendChild(domForm); // 将form元素放在body元素下domForm.submit(); // 提交表单实现下载}
```
相当于执行了一次表单的提交。

老规矩，磨叨磨叨，个人理解哈：

话说为啥上面这些方式能实现文件的下载呢？
仔细看会发现其实方法大同小异，都是在访问目标文件的存储路径。
正常情况下，浏览器访问一个路径，如果这个路径指向的是html，gif，pdf等这种文件，浏览器能看明白啊，就直接解析了，展示在浏览器新开的页面上。
但是如果这个路径指向的是Excel，word，zip等这种浏览器无法解析的文件，浏览器打不开就默认下载了，于是我们才能用这些功能执行下载。

哀家乏了，先这样吧……

JS实现文件下载的几种方法相关推荐

用Delphi实现文件下载的几种方法
用Delphi实现文件下载的几种方法 <script language="javascript" src="/skin/77941/wangzhai.js&qu ...
js遍历对象的几种方法
js遍历对象的几种方法第一种: for......in const obj = {id:1,name:'zhangsan',age:18 }for(let key in obj){console.l ...
js 字符串拼接的4种方法
一.使用连接符 + 把想要连接的字符串串起来 let shy = '帅哥' let a = '我是' + shy console.log(a) // 我是帅哥二.模板字符串模板字符串(templa ...
JS下载文件的三种方法
因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法: 利用HTML download 属性 var a = ...
JS截取字符串的三种方法详解
本文详细讲解了JS截取字符串的三种方法,文中通过示例代码介绍的非常详细.对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 JS提供三个截取字符串的方法,分别是:slice(),subst ...
数组拼接html js,js数组合并的几种方法
JS合并数组的几种方法及优劣比较 var datas = [ ['红色', '蓝色'], ['XL'], ['图片', '文字'] ]; 如何将let datas = [[1, 2], [3,0,5 ...
JS数组添加元素的三种方法
JS数组添加元素的三种方法 1.push() 方法可以向数组末尾添加一个或多个元素,并且返回新的长度语法:arr.push(element1,element2,element3,····) 参数概 ...
JS刷新页面的几种方法
转载自 JS刷新页面的几种方法 Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 loc ...
html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...

JS实现文件下载的几种方法

JS 实现下载功能的几种方法

JS实现文件下载的几种方法相关推荐

最新文章

热门文章