The front-end processes the binary stream file and exports it as an excel table

Export the binary stream file returned by the backend as an excel sheet, and
call the showConfirm function directly when using it.
The final effect
insert image description here

export function getExport(param) {
    
    
    get('/api/xdata/v1/basic/auth/excel', {
    
     ...param }).then((res) => {
    
    
        // let name = getFileName(url);

        let name = 'export.xlsx';
        console.log('res', res);
        // let u = window.URL.createObjectURL(new Blob([res]));
        const type = 'application/vnd.ms-excel;charset=utf-8'; //excel文件
        let u = window.URL.createObjectURL(new Blob([res], {
    
     type: type }));

        let a = document.createElement('a');
        a.download = name;
        a.href = u;
        console.log(a);
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
        // setTimeout(myDlWarn, 0);
    });
}
export function showConfirm(text, exportParams) {
    
    
    confirm({
    
    
        title: `您确认要导出${
      
      text}`,
        icon: <ExclamationCircleOutlined />,
        content: '',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
    
    
            getExport(exportParams);
        },
        onCancel() {
    
    
            console.log('Cancel');
        },
    });
}

The get interface is self-encapsulated, and the encapsulation is as follows

/**
 * 从 cookie 中获取数据
 * @param {string} cname cname
 */
export const getCookie = (cname) => {
    
    
    var name = cname + '=';
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
    
    
        var c = ca[i].trim();
        if (c.indexOf(name) === 0) {
    
    
            return c.substring(name.length, c.length);
        }
    }
    return '';
};
const ajax = (method, url, data, options = {
     
     }) => {
    
    
    const isPost = method === 'post';
    const isPut = method === 'put';
    const isPatch = method === 'patch';
    const isGet = method === 'get';

    const sentOptions = {
    
    
        url,
        method,
        withCredentials: true, // 允许跨域
        credentials: 'include', 
        headers: {
    
    
            'X-Request-By': 'ERApplication',
            'X-Requested-With': 'XMLHttpRequest',
            'X-Region': 'bj',
            'X-From': 'web',
        },
        ...options,
    };

    if (isPost || isPatch) {
    
    
        sentOptions.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        sentOptions.data = JSON.stringify(data);
    } else if (isPut) {
    
    
        sentOptions.data = JSON.stringify(data);
    } else if (isGet) {
    
    
        sentOptions.headers['Content-Type'] = 'utf-8';
        sentOptions.params = data;
    }

    return new Promise((resolve, reject) => {
    
    
        axios(sentOptions)
            .then((response) => {
    
    
                resolve(response.data);
            .catch((error) => {
    
    
                console.log('catch');
                reject(error);
            });
    });
};
export const get = (url, data = {
     
     }) => {
    
    
    return ajax('get', BASE_URL + url, data, {
    
     responseType: 'blob' });
};

Guess you like

Origin blog.csdn.net/weixin_43569396/article/details/125644430