js实现下载(文件流式)方法详解与完整实例源码

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

js实现下载(文件流式)方法详解与完整实例源码

阿晏_   2022-12-10 我要评论

在介绍JS文件流式下载文件方法之前,先记录下window.location.href的使用方法

window.location.href的用法

javascript中的location.href有很多种用法,主要如下。

self.location.href="/url"//当前页面打开URL页面
location.href="/url"//当前页面打开URL页面
windows.location.href="/url" //当前页面打开URL页面,前面三个用法相同。
this.location.href="/url" //当前页面打开URL页面
parent.location.href="/url" // 在父页面打开新页面
top.location.href="/url" //在顶层页面打开新页面

如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

此外,window.location.href=window.location.href;window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。

当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

JS文件流式下载文件源码实例

下面是使用axios写的一个完整JS文件流式下载文件的完整源码

const apiurl = '' // 接口地址
this.exportLoading = true
axios.post(apiurl, params, {
   'responseType': 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
}).then( (response) =>{
    console.log('response', response, response.data.size)
    this.exportLoading = false
    if(response.data){
        if(response.data.size < 1000){
        	// 根据文件流的大小判断异常情况
            if(response.data.size == 63){
                this.$message.warning('查无结果');
                return
            }
            if(response.data.size == 84){
                this.$message.warning('导出数据超出最大限制值');
                return
            }
        }else{
            const blob = new Blob([response.data],{type: 'application/vnd.ms-excel'})
            const linkNode = document.createElement('a');
            linkNode.style.display = 'none';
            linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
            document.body.appendChild(linkNode);
            linkNode.click();  //模拟在按钮上的一次鼠标单击
            URL.revokeObjectURL(linkNode.href); // 释放URL 对象
            document.body.removeChild(linkNode);
        }
    }
}).catch( (error) =>{
    console.log(error);
    this.exportLoading = false
});

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们