前端实现超G的大文件下载

172 阅读1分钟

大文件下载时,前端js没有下载进度条,普通方法无法实现,本文通过原生js实现上G大文件下载

html页面

<a id="1002" onclick="downLoad(1002)" href="http://xxx:端口/manMadePlanDown/1002">文件下载1002</a>

js实现

<script>
    function downLoad(id) {
    let a = document.getElementById(id);
    let url = a.getAttribute('href');
    let request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.open('get', url, true);
    request.setRequestHeader('token', '123432424jdkfj');
    request.onreadystatechange = e => {
        if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
            a.href = URL.createObjectURL(request.response);
            a.onload = () => {
                URL.revokeObjectURL(a.href);
            }
        }
    };
    request.send(null);
}
</script>

以上仅供参考 共同学习进步