web页面实现文件下载的几种方式

https://www.jianshu.com/p/bf0a4e3926a4

https://www.jianshu.com/p/bf0a4e3926a4

https://www.jianshu.com/p/bf0a4e3926a4

这一期的需求里包括文件下载导出excel表格，现在总结一下：

1）window.open()和window.location.href
详情链接：http://www.runoob.com/jsref/met-win-open.html

window.open()在下载文件的时候会打开一个新的页面，同时会暴露链接地址， 而且会在下载文件的过程中，访问链接2次，虽然前端只下载了一次文件，但是服务端会生成2次文件。

2）form表单

用动态生成的form元素，实现表单提交，并完成下载。注意此处不会ajax。原理仅仅是表单的提交。

由于jQery的ajax函数、及ajaxSubmit等函数的返回类型（dataType）,只有xml、text、json、html等类型，没有'流'类型，故我们只要实现ajax下载时，不能够使用相应的ajax函数进行文件下载。

不过我们可以通过js生成一个form，用这个form提交参数，并返回“流”，类型数据。在实现过程中，页面也没有刷新

参考文档：https://www.cnblogs.com/voiphudong/p/3284724.html

get请求

3）a标签(兼容性比较差，chrome没问题。具体可以百度)

当需要在下载文件前做一些操作的话，则需要在点击事件中创建a元素，此时最好不要在html中有a元素，不然由于a标签的默认事件和a.click()冲突，会有一些小问题。

4)iframe

如果是get方式的url下载链接，客户端可以通过一个动态生成的隐藏的iframe来得到下载的二进制文件。原理：iframe有一个src属性，其本质就是发送http请求，get页面或者数据。

以上方式存在一些兼容问题以及浏览器直接解析.txt、.xml文件的风险。所以我又在网上搜到了downloadjs插件，但是我在项目中用到的downloadjs并不好用

以上所有方法最好都把提交名利和点击事件放到异步操作中，比如说延时器。

4）插件download.js（具体请看官网：http://danml.com/download.html）

npm install downloadjs

然后用的到的文件通过 import download from 'downloadjs' 引入

最后通过download()方法使用

下载调用的方法download(data, strFileName, strMimeType)对应为：download("数据","想要起的名称","Mime类型")，当不写后面的两个参数时，就可以下载指定文件了（不支持跨域），源码很简单就是没有后面的参数，就会通过ajax发送一个get请求，获取url的二进制流，然后把二进制流转化为对象就完成了下载工作。