前端处理二进制流文件导出为excel表代码示例

 更新时间:2023年08月03日 11:07:09   作者:刘小蟲_  
这篇文章主要给大家介绍了关于前端处理二进制流文件导出为excel表的相关资料,后台管理系统,常会出现导出excel表格功能,需要的朋友可以参考下

将后端返回的二进制流文件

导出为excel表用的时候直接调用showConfirm函数即可

最后效果

代码示例 

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');
        },
    });
}

get接口是自己封装的,封装如下

/**
 * 从 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' });
};

总结 

到此这篇关于前端处理二进制流文件导出为excel表的文章就介绍到这了,更多相关前端二进制流导出excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序三级联动选择器使用方法

    微信小程序三级联动选择器使用方法

    这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • JavaScript类型系统之Object详解

    JavaScript类型系统之Object详解

    对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象
    2016-01-01
  • JavaScript setTimeout()基本用法有哪些

    JavaScript setTimeout()基本用法有哪些

    这篇文章主要介绍了JavaScript setTimeout()基本用法有哪些,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • OpenLayer学习之自定义测量控件

    OpenLayer学习之自定义测量控件

    这篇文章主要为大家详细 介绍了OpenLayer学习之自定义测量控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript基于面向对象实现的猜拳游戏

    JavaScript基于面向对象实现的猜拳游戏

    这篇文章主要介绍了JavaScript基于面向对象实现的猜拳游戏,结合完整实例形式分析了javascript基于面向对象实现猜拳游戏的具体页面布局、样式及功能相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • javascript将浮点数转换成整数的三个方法

    javascript将浮点数转换成整数的三个方法

    将浮点数转换成整数方法有很多,本例为大家介绍常用的三个方法,如果读者想到其他好用方法,也可以交流一下
    2014-06-06
  • JS基于VUE组件实现城市列表效果

    JS基于VUE组件实现城市列表效果

    这篇文章主要为大家详细介绍了JS基于VUE组件实现城市列表效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序预览二进制流文件的方法

    微信小程序预览二进制流文件的方法

    这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • javascript算法解数独实现方案示例

    javascript算法解数独实现方案示例

    这篇文章主要为大家介绍了javascript算法解数独实现方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • js实现一个猜数字游戏

    js实现一个猜数字游戏

    本文主要介绍了js实现一个猜数字游戏的实例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03

最新评论