文件下载：
文件下载通常有几种方法
1.通过url下载
2.location.href
3.form提交直接下载
4.HTML5 a.download结合blob对象进行下载
第一种方式： 第一种方法是前后端的接口只给了一个API请求： 前端第一个实现是使用a标签，
第二种方式： 这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种方式：
window.location.href = urls; // 本窗口打开下载
window.open(urls, '_blank'); // 新开窗口下载
第三种方式:
form表单
不需要我们处理返回二进制流直接下载，非常方便
form的action设置为接口地址，method设置为post，Post到后台的数据设置为input的属性 name = key，value = value的形式，如果有多个key、value的值要传递，那么就设置多个input来分别储存单个的key、value；
如果请求的接口可以不需要参数，那么input还是必须要一个，如果不要得话 会引起接口报错
原理：form的action相当于一个浏览器本页签/页面的一个请求，不会被后台，前台的路由拦截。所以能够提交成功。
注意点：如果设置method为get，在action中的uri添加了参数的话，想用这个参数替代input的key、value形式来提交到后台，这参数是没有效果的，后台拿不到这些参数，真正的参数还是以input的name、value的形式储存，在submit方法执行后传递到后台。
这样我们就是实现了文件下载，但是表单提交的数据一般是简单的键值对，如果传参比较复杂可以考虑将表单序列化提交。
第四种：
标签的download是HTML5标准新增的属性，作用是指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
这种是定义的接口不是下载文件的路径，而是通过API可以获得文件的内容，由前端把内容写入到文件中，这种方法是通过获取文件信息，在网页上利用click事件，创建一个文件，然后将文件信息写入到文件中，然后保存
------------
最近做后台管理系统,需要用到导出下载报表的功能,然鹅后台返回给我的是这个东东,而不是链接!刚开始一脸懵逼!
因为项目是基于vue的，而且提交的请求参数涉及很多参数，比较复杂，还是用post方式传输的,所以采用了方法四来实现!
解决方法:
直接上代码:
downloadPlanList(this.planList).then(res => { // console.log(res, 6141544) console.log(res, 6251449) if (res.data.code !== 1044) { let blob = new Blob([res.data], { type: 'application/msword' // 将会被放入到blob中的数组内容的MIME类型 }) // 兼容IE10 if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, '土地物业巡查计划表.doc') // eslint-disable-next-line brace-style } // 兼容谷歌和火狐 else { let objectUrl = URL.createObjectURL(blob) let downloadLink = document.createElement('a') downloadLink.href = objectUrl // eslint-disable-next-line semi
//保存下载的文件名:
downloadLink.download = '土地物业巡查计划表.doc'; // 兼容火狐 document.body.appendChild(downloadLink) downloadLink.click() document.body.removeChild(downloadLink) // 释放内存 window.URL.revokeObjectURL(downloadLink.href) this.$nextTick(() => { this.$message.success('下载成功!') }) } } else { this.$message.error(res.data.msg)}
}) }下面是vscode里面的代码截图
下面附上后台返回我的下载文件的内容,刚开始就是看到这些一脸懵逼的
由于字数太多,专门放在下一边文章,欢迎点击阅读...
