文件下载的两种方式

230 阅读1分钟
  1. 利用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;
    }
}
  1. 利用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);
}