- 利用form表单
get方式,交由浏览器处理下载过程,但是参数过多时url拼接太长,而且参数只能传递字符串,无法设置请求头,安全性一般。需要注意的是,即使传递了别的数据格式的参数,input的value属性也会自动转化为字符串,如[1,2,3] => '1,2,3'
function postDownload(url, params) {
const $form = $('<form></form>');
let formContent = '';
_.each(params, (value, key) => {
formContent += `<input type="hidden" name="${key}" value="${value}" />`;
});
$form.attr({
action: url,
method: 'POST'
}).css('display', 'none').append(formContent);
try {
$form.appendTo(document.body).submit().remove();
}
catch (error) {
throw error;
}
}
- 利用XMLHttpRequest对象
利用ajax和a标签的download属性来实现,默认都会处理成txt格式,需要特殊约定一些字段来表示下载的文件格式和名称
export function postDownload(url, params,token) {
const xhr = new XMLHttpRequest();
const formData = new FormData();
_.each(params, (value, key) => {
formData.append(key, value);
});
xhr.open('post', url);
xhr.setRequestHeader('csrftoken', token);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const response = xhr.response;
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(response);
}
else {
const url = window.URL
? window.URL.createObjectURL(response)
: window.webkitURL.createObjectURL(response);
const a = document.createElement('a');
a.href = url;
if (params.fileName) {
a.download = params.fileName;
}
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
}
};
xhr.send(formData);
}