前端下载方式

前端下载方式

1. axios下载

var val = {
	url:",
	method:'',
	data:params //post传参
}
function handleBlob(val){
    axios({
        url:val.url,
        method:'post',
        responseType:"blob",
        getResponse:true,
        data:val.data
    }).then(res=>{
        let name = res.headers['content-disposition'].split(';')[1];
        const blog = new Blob([res.data],{
            type: res.data.type
        })
        const url = window.URL.createObjectURL(blog);
        let a = document.createElement('a');
        a.download = name.split('=')[1];
        a.href = url;
        a.click();
        a.remove();
    }).catch(err=>{
        console.log(err);
    })
}

2. 模拟form表单下载

var options = {
	url:"",
	methods:'',
	data:params //传参
}
downloadDs(options){
   const config = {
        method: options.method,
        url: options.url,
        data: options.data
    };
    const $form = document.createElement('form');
    $form.setAttribute('method', config.method);
    $form.setAttribute('action', config.url);
    for (const key in config.data) {
        const input = document.createElement('input');
        input.setAttribute('name', key);
        input.setAttribute('value', config.data[key]);
        $form.appendChild(input);
    }
    document.body.appendChild($form);
    $form.submit();
    $form.remove();
},

3. 原生xhr下载
   之前写的有些问题，可以参考axios获取文件名称及文件类型
   链接: link