前端通过url实现文件下载

文件下载"/>

前端通过url实现文件下载

get请求方式

• 和后端确定接口，在请求拦截里设置请求头
• 前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，

// 界面代码
// vue 里面<a @click="downFile()">{{文件名}}</a>// 文件下载downFile () {let a = document.createElement('a')a.href = `使用后端的请求url` // 这里的请求方式为get，如果需要认证，接口上需要带上tokena.click()},// ************************************
// react的附件下载导出也可以使用上面方式完成，但是在ie的低版本浏览器可能支持不太友好
// 使用file-saver插件帮助实现import FileSaver from 'file-saver'// 请求接口成功后let f = new Blob(['请求接口得到的数据'])FileSaver.saveAs(f, '文件名')// ************************************
// 关于JSON类型文件下载会直接打开问题
// 在JQ中使用$.getJSON("文件的的接口请求地址地址或者本地的文件路径", function (data){let jsonData = JSON.stringify(data)let eleLink = document.createElement('a');eleLink.download = '模板.json';eleLink.style.display = 'none';// 字符内容转变成blob地址let blob = new Blob([jsonData]);eleLink.href = URL.createObjectURL(blob);// 触发点击document.body.appendChild(eleLink);eleLink.click();
})