vue 导出excel 表格 和 下载文件流的封装

 

const blobUrl = ref('');
export function downloadFileStream(url:any) {
    return (data:any,name:string ) => {
        console.log(data, 'data')
        const token: string = Cookies.get('x-admin-token')!
        const params = new URLSearchParams(data).toString();
        const xhr = new XMLHttpRequest();
        xhr.open('GET', baseIp + url + `? ${params} `, true);
        xhr.setRequestHeader('Token', token);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                const blob = new Blob([xhr.response], { type: 'application/octet-stream' });
                blobUrl.value = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = blobUrl.value;
                a.download = `${name}.xlsx`;
                a.click();
                window.URL.revokeObjectURL(blobUrl.value);
            }
        };

        xhr.send(JSON.stringify(data));
    }
}

组件调用 


 

还有一种就是前端使用第三方插件表格的导出Excel 

记得安装  "xlsx": "^0.17.0"