Vue实现文件的上传与下载
项目需求: 前端页面需要导出Excel文件,传入过多的参数给后端,get地址栏不行,只能接受post方式去导出数据
1、get的下载方式
let url = xxxx.action?a=xx&b=yy; window.location.href = url; // 或者 window.open(url, '_self')
弊端:当请求参数较多时,get的方式无法使用,这时候需要考虑post的方式,但是直接通过ajax的post的方式无法调用浏览器的下载功能
2、post的下载方式
原理: 创建一个隐藏form表单,通过form表单的提交刷新功能,实现下载。
代码如下:
export default { methods: { // 导出excel postExcelFile (params, url) { // params是post请求需要的参数,url是请求url地址 var form = document.createElement('form') form.style.display = 'none' form.action = url form.method = 'post' document.body.appendChild(form) // 动态创建input并给value赋值 for (var key in params) { var input = document.createElement('input') input.type = 'hidden' input.name = key input.value = params[key] form.appendChild(input) } form.submit() form.remove() } } }
需要注意的是,这种方式的enctype默认为form-data的形式,而不是application/json的格式,因此后端的接口也应该要参数格式一致。
正常情况下,可以修改enctype的值,参考文章:
https://www.cnblogs.com/mmzuo-798/p/11634055.html