zoukankan      html  css  js  c++  java
  • 【封装】 兼容性最强下载文件

    /**
     * 兼容性最强下载文件
     * url 接口
     * data 数据
     * method
     */
    export const downloadFile = (url, data, method = 'GET') => {
        const body = document.getElementsByTagName('body')[0];
        const form = document.createElement('form'); // <form method='GET' action='https://www.baidu.com'>
        form.method = method;
        form.action = url;
        for (const key of Object.keys(data)) {
            const param = document.createElement('input'); // <input name="startTime" value="2019-07-15" />
            param.type = 'hidden';
            param.name = key;
            param.value = data[key];
            form.appendChild(param);
        }
        body.appendChild(form);
        form.submit(); // 发请求
        body.removeChild(form);
        // </form> => submit() => 发送请求 url ?{startTime: '2019-07-15'} => 返回响应 文件流,浏览器自动下载
    };

    二、 使用

    1)Angular中使用

        downloadLogApi(taskId: string) {
            downloadFile(`${API_PREFIX}/jira/tasks/${taskId}/log/download`, {}, 'GET');
            return void 0;
        }

    2)vue当中使用

    // 导出 预约人员信息列表 {直播id, 平台id}
    export const requestExportLiveUserList = ({liveId, platformId}) => {
        const url = preFixed + '/live/exportOrderLiveUserList';
    
        const reqBody = emptyCannotRequest({
            liveId,
            platformId
        });
        downloadFile(url, reqBody, 'GET');
        return 0;
    };
  • 相关阅读:
    Vue监听器、过滤器
    Vue生命周期、计算属性
    数组去重
    ES6总结
    学习笔记--html篇(1)
    学习整理--flex布局(1)
    对块作用域与变量函数提升再添新认识
    了解使用web workers
    js中的事件循环模型与特殊的定时器
    操作系统、浏览器与js之间的一些概念与联系
  • 原文地址:https://www.cnblogs.com/mailyuan/p/13815160.html
Copyright © 2011-2022 走看看