【2020.5.25】已将get和post做了处理,可以从同一个入口进入,通过参数决定使用post还是get方法
git地址 https://github.com/miaomiaoG/downloadjs/tree/master
记录一下这次处理下载的方式,下次有类似的可以快速定位。用js处理下载的两种方法,1处理get请求,2处理post请求
1、 get请求
通过在页面创建隐藏的a标签的方式进行下载,可以通过a标签的download属性设置下载后的文件的名字
const download = (src, downloadName) => {
const aDom = document.createElement('a');
aDom.style.display = 'none';
if (downloadName) {
aDom.download = downloadName;
}
aDom.href = src;
aDom.target = '_blank';
document.body.appendChild(aDom);
aDom.click();
document.body.removeChild(aDom);
};
2、post请求
通过form表单的形式进行下载,服务端需要把接受数据的类型改为formdata而不是json,值是数组时需要创建多个同名input进行传值,不能赋值给一个input的value。
const createInputItem = (name, value) => {
let formInputItem = document.createElement('input');
formInputItem.setAttribute('type', 'hidden');
formInputItem.setAttribute('name', name);
formInputItem.setAttribute('value', value);
return formInputItem;
};
export const postDownload = (url, obj) => {
let downloadForm = document.createElement('form'); // 定义一个form表单
downloadForm.setAttribute('style', 'display:none');// 将表单隐藏
downloadForm.setAttribute('target', '_blank');
downloadForm.setAttribute('method', 'post');
downloadForm.setAttribute('action', url);
Object.entries(obj).forEach(([name, value]) => {
if (Array.isArray(value)) {
/*
* value维数组时创建array.length个name都为给定name的input,value依次为数组的每个元素
* res:<input name="myname" value="arrray[0]"/>
* <input name="myname" value="arrray[1]"/>
* ...
* 最后通过form表单提交
* */
value.forEach(item => {
let formInputItem = createInputItem(name, item);
downloadForm.appendChild(formInputItem);// 一定要把参数添加到form里
});
} else {
let formInputItem = createInputItem(name, value);
downloadForm.appendChild(formInputItem);// 一定要把参数添加到form里
}
});
document.body.appendChild(downloadForm);// 将表单放置在页面中
downloadForm.submit();// 表单提交
document.body.removeChild(downloadForm);// 移除表单
};