const cname = this.loginUser.username
const params = await this.getParams()//自己写的获取参数方法
axios({
url: ${baseURL}/download ,
method: 'post',
data: params,
responseType: 'blob',
headers: {
cid: this.customerCode
}
}).then(res =>{
const fileName = wifi预警_${cname}.csv
var blob = res.data
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(blob, fileName) //IE导出
} else {
let url = window.URL.createObjectURL(new Blob([blob]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
link.click()
}
})
},
Form里面有你很多的input
其实只要在你Form里面隐藏一个iframe
<iframe name="downloadFrame" style="display: none" frameborder="0"></iframe>
然后 提交表单 把target指向这个Iframe就行了
$("#formId").attr("action","下载的URL")
$("#formId").attr("target","downloadFrame")//iframe的名字
$("#formId").submit()
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。[1]
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
该技术在 1998 年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组件原属于微软 Exchange Server，并且迅速地成为了 Internet Explorer 4.0 的一部分。部分观察家认为，Outlook Web Access 是第一个应用了 Ajax 技术的成功的商业应用程序，并成为包括Oddpost 的网络邮件产品在内的许多产品的领头羊。但是，2005 年初，许多事件使得 Ajax 被大众所接受。Google 在它著名的交互应用程序中使用了异步通讯，如Google、Google 地图、Google 搜索建议、Gmail等。Ajax 这个词由《Ajax: A New Approach to Web Applications》[2] 一文所创，该文的迅速传播加强了人们使用该项技术的意识。另外，对Mozilla/Gecko 的支持使得该技术走向成熟，变得更为易用。
Ajax 前景非常乐观，可以提高系统性能，优化用户界面。Ajax 现有直接框架 AjaxPro，可以引入 AjaxPro.2.dll 文件，可以直接在前台页面 JavaScript 调用后台页面的方法。但此框架与表单验证有冲突。另外微软也引入了 Ajax 组件，需要添加 AjaxControlToolkit.dll 文件，可以在控件列表中出现相关控件。
1. 调用后端接口导出文件
示例下载接口url https://gold-cdn.xitu.io/extension/0.3.9/package.crx
1.1 window.open(url)
会打开一个新窗口，开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。
Chrome、IE、Safair支持，貌似火狐不支持
1.2 window.location=url
在当前窗口下载
Chrome、Safair支持
1.3 iframe
在HTML中，iframe 的属性用src，但在JS中，只有部份浏览器支持修改src(读是没问题)，真正通用的是要修改对应框架的href值。
1.4 <a href="url" download="filename">点击链接下载</a>
HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载，目前只有chrome、firefox、opera、Edge支持。常用此方法点击下载图片。
IE既不支持a标签的download属性也不允许js调用a 标签的click方法。
2. 前端直接导出文件到本地
2.1 将数据转成DataURI用<a>标签下载
<a href="DataURI" download="filename">点击链接下载</a>
Data URI Scheme
Data URI Scheme是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。 Data URI Scheme一般用于将经过base64编码的数据嵌入网页中，从而减少请求资源的链接数。IE8 之前的版本都不支持 data URI scheme。
DataURI的格式：
生成DataURI的方式
1. encodeURIComponent
使用这种方式，当数据过多时，URI长度容易超出浏览器限制。 encodeURIComponent常用来转码接口参数，为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容都需要用encodeURIComponent进行转义。
2. URL.createObjectURL
URL.createObjectURL的参数是File对象或者Blob对象
IE10以下不支持URL.createObjectURL
2.2 windows.navigator.msSaveBlob IE10~Edge 专用
msSaveBlob 是IE10~Edge 私有方法。
2.3 execCommand
有的资料有提到IE9可以使用execCommand方法来保存数据到本地文件，但是我自己没有验证过，不知道是否可行。而且MDN文档中execCommand没有查到SaveAs命令。这块只是做个小记录。
js数据直接导出/下载数据到本地到方法总结
本文转载自：https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension
