一种网页中的文件下载的方法和装置与流程

专利2022-06-30  94


本发明涉及一种网页中的文件下载的方法和装置。



背景技术:

网页中的文件下载一直都是网页中的基本功能,并且已经有了成熟的实现方式。但是在较差网络环境下或服务端需要耗时生成文件的情况下,页面中发出一个文件下载的请求之后,可能需要较长时间才能收到服务端的响应,而在次期间,用户需要保证文件下载页面的不关闭,否则请求将会取消从而不会执行文件下载,这就影响了用户浏览网页的体验。

为了优化用户使用网页中文件下载功能的体验,优化方式层出不穷。目前主要的手段是从缩短请求响应时间出发,在服务端进行生成文件的优化。服务端生成的文件需要从数据库导出数据,耗时的操作一般都发生在操作数据库层面,所以优化数据库结构,优化查询算法,都是常用的优化方法。另外通过把一个大文件拆分成多个小文件,页面进行多次下载,这减少了服务端处理单个下载文件的时间,缩短了单次请求的响应时间,这也是一种常用的优化手段。

互联网技术的快速发展使得浏览器中承载的功能越来越丰富,serviceworker就是其中之一。serviceworker是一个注册在指定源和路径下的事件驱动worker,其可以对网页的资源请求进行拦截并修改,细粒度地缓存资源。虽然其不能对页面进行dom操作,但是可以通过postmessageapi与页面进行交互,间接操作页面。

serviceworker的出现,使得我们可以编写在浏览器后台运行的脚本,而此脚本的生命周期独立于页面,不会随页面的关闭而销毁,这就为我们在前端进行页面的优化提供了新的思路。如果用户在页面a执行文件下载的操作,我们把这个文件下载的请求放到serviceworker中,不论用户在a页面进行什么操作,即使是关闭了a页面,跳转到b页面,也不会取消这个文件下载的请求。根据这一思路,我们就有可能做到让用户在点击了文件下载之后,不必要一直待在此页面,从而优化用户使用体验。

在某些场景中,网页中需要下载的文件需要服务端在接收到请求之后,才去处理生成文件并返回到前端。如果服务端处理生成文件的过程比较耗时,则前端页面就需要等待较长时间,在等待服务端的响应期间,前端页面不能关闭,否则会取消掉请求,从而不会有下载文件的事件发生。发生这种情况的主要原因在于,页面的销毁会导致页面中资源请求的销毁。



技术实现要素:

针对相关技术中存在的问题,本发明的目的在于提供一种网页中的文件下载的方法和装置,使得用户在点击文件下载之后,不需要强制保持此页面不关闭,可以随意跳转其它页面,待服务端生成文件并返回前端后,在新打开的页面上会自动执行文件下载。

根据本发明的实施例,网页中的文件下载的方法包括:注册事件驱动应用进程,事件驱动应用进程的作用域包括第一页面和第二页面;在第一页面发起文件下载请求,并向事件驱动应用进程发送请求下载文件消息;事件驱动应用进程收到消息后,向服务端发送文件下载请求;事件驱动应用进程收到服务端根据文件下载请求返回的文件流后,将文件流的类文件对象发送至第二页面;第二页面收到类文件对象后,执行文件下载。

根据本发明的实施例,通过postmessageapi向事件驱动应用进程发送对应于文件下载请求的消息。

根据本发明的实施例,通过fetchapi向服务端发送文件下载的请求。

根据本发明的实施例,第二页面收到类文件对象后,生成指向类文件对象的统一资源定位符,以及,在页面中创建a标签,将类文件对象的统一资源定位符赋值给a标签的href属性。

根据本发明的实施例,网页中的文件下载的装置包括:注册模块,用于注册事件驱动应用进程,事件驱动应用进程的作用域包括第一页面和第二页面;第一请求发送模块,用于在第一页面发起文件下载请求,并向事件驱动应用进程发送请求下载文件消息;第二请求发送模块,用于在事件驱动应用进程收到消息后,向服务端发送文件下载请求;以及,在事件驱动应用进程收到服务端根据文件下载请求返回的文件流后,将文件流的类文件对象发送至第二页面;文件下载执行模块,用于在第二页面收到类文件对象后,执行文件下载。

根据本发明的实施例,第一请求发送模块通过postmessageapi向事件驱动应用进程发送请求下载文件消息。

根据本发明的实施例,第二请求发送模块通过fetchapi向服务端发送文件下载的请求。

根据本发明的实施例,文件下载执行模块包括:在第二页面收到类文件对象后,生成指向类文件对象的统一资源定位符,以及,在页面中创建a标签,将类文件对象的统一资源定位符赋值给a标签的href属性。

本发明的有益技术效果在于:通过将网页中的文件下载请求放到事件驱动应用进程(serviceworker)中,利用serviceworker独立于页面生命周期的特点,使得页面在关闭后,文件下载的请求不会被取消。从而,用户在点击文件下载之后,不需要强制保持此页面不关闭,可以随意跳转其它页面,待服务端生成文件并返回前端后,在新打开的页面上会自动执行文件下载。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。

图1是根据本发明一个实施例的网页中的文件下载方法的流程图。

图2是根据本发明的效果示意图。

图3是根据本发明一个实施例的网页中的文件下载方法的流程图。

图4是根据本发明一个实施例的网页中的文件下载方法的示意图。

具体实施方式

下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员所获得的所有其他实施例,都属于本发明保护的范围。

如图1所示,本发明提供了一种网页中的文件下载的方法,包括:

s11,注册事件驱动应用进程,事件驱动应用进程的作用域包括第一页面和第二页面;

s12,在第一页面发起文件下载请求,并向事件驱动应用进程发送请求下载文件消息;

s13,事件驱动应用进程收到消息后,向服务端发送文件下载请求;

s14,事件驱动应用进程收到服务端根据文件下载请求返回的文件流后,将文件流的类文件对象发送至第二页面;

s15,第二页面收到类文件对象后,执行文件下载。

本发明的上述技术方案,通过将网页中的文件下载请求放到事件驱动应用进程(serviceworker)中,利用serviceworker独立于页面生命周期的特点,使得页面在关闭后,文件下载的请求不会被取消。从而,用户在点击文件下载之后,不需要强制保持此页面不关闭,可以随意跳转其它页面,待服务端生成文件并返回前端后,在新打开的页面上会自动执行文件下载。

本发明的效果如图2中所示,在a页面发起文件下载请求,关闭a页面后,该请求仍不会取消,如果有b页面被打开,则在接收到服务端的响应之后,在b页面执行了文件下载。

s12可以具体包括:通过postmessageapi向事件驱动应用进程发送对应于文件下载请求的消息。

s13可以具体包括:通过fetchapi向服务端发送文件下载的请求。

s15可以具体包括:第二页面收到类文件对象后,生成指向类文件对象的统一资源定位符,以及,在页面中创建a标签,将类文件对象的统一资源定位符赋值给a标签的href属性。

图3是根据本发明一个实施例的网页中的文件下载方法的流程图。在一些实施例中,如图3所示,本发明的网页中的文件下载方法可以包括如下步骤:

s31,页面需要注册serviceworker,注册的时候需要指定作用域,serviceworker只可以控制指定作用域内的页面,这些页面也都是同源的。

s32,在serviceworker控制的某一页面中,点击文件下载按钮,并通过postmessageapi给serviceworker发送请求下载文件消息。

s33,serviceworker通过postmessageapi监听到页面发送过来的消息,利用fetchapi,向服务端发送文件下载请求。

s34,服务端接收到请求,执行文件生成操作,待文件生成后,向前端返回文件流。

s35,serviceworker利用fetchapi接收到服务端的文件流后,通过postmessageapi将文件流blob对象传给页面(指在serviceworker作用域下的任一页面)。

s36,页面接收到blob对象之后,利用url.createobjecturlapi创建一个指向该blob对象的url。

s37,在页面中动态创建a标签,并将步骤s36中生成的url赋值给a标签的href属性。

s38,js触发a标签的点击事件,文件开始下载;js动态删除a标签。

s39,由于步骤s36中会将blob对象存入内存中,所以待文件下载完成之后,需要手动将此blob对象从内存中释放。

在一些实施例中,serviceworker作为在浏览器后台运行的脚本,其实际上相当于是在页面和服务端之间充当了代理服务器的角色,它可以拦截页面的请求,可以操作资源缓存,可以主动向页面推送。如图4所示,页面和serviceworker之间进行通信,serviceworker和服务端之间进行通信。serviceworker作为事件驱动型worker,它可以监听到页面中的网络请求、postmessage等事件,同时可以通过postmessage、push等向页面发送消息。另外serviceworker可以通过fetch向服务端发送网络请求。

本发明还提供了一种网页中的文件下载的装置,包括:注册模块,用于注册事件驱动应用进程,事件驱动应用进程的作用域包括第一页面和第二页面;第一请求发送模块,用于在第一页面发起文件下载请求,并向事件驱动应用进程发送请求下载文件消息;第二请求发送模块,用于在事件驱动应用进程收到消息后,向服务端发送文件下载请求;以及,在事件驱动应用进程收到服务端根据文件下载请求返回的文件流后,将文件流的类文件对象发送至第二页面;文件下载执行模块,用于在第二页面收到类文件对象后,执行文件下载。

在一个实施例中,第一请求发送模块通过postmessageapi向事件驱动应用进程发送请求下载文件消息。

在一个实施例中,第二请求发送模块通过fetchapi向服务端发送文件下载的请求。

在一个实施例中,文件下载执行模块包括:在第二页面收到类文件对象后,生成指向类文件对象的统一资源定位符,以及,在页面中创建a标签,将类文件对象的统一资源定位符赋值给a标签的href属性。

以上仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。


技术特征:

1.一种网页中的文件下载的方法,其特征在于,包括:

注册事件驱动应用进程,所述事件驱动应用进程的作用域包括第一页面和第二页面;

在所述第一页面发起文件下载请求,并向所述事件驱动应用进程发送请求下载文件消息;

所述事件驱动应用进程收到所述消息后,向服务端发送所述文件下载请求;

所述事件驱动应用进程收到所述服务端根据所述文件下载请求返回的文件流后,将所述文件流的类文件对象发送至所述第二页面;

所述第二页面收到所述类文件对象后,执行所述文件下载。

2.根据权利要求1所述的网页中的文件下载的方法,其特征在于,通过postmessageapi向所述事件驱动应用进程发送对应于所述文件下载请求的消息。

3.根据权利要求1所述的网页中的文件下载的方法,其特征在于,通过fetchapi向所述服务端发送所述文件下载的请求。

4.根据权利要求1所述的网页中的文件下载的方法,其特征在于,所述第二页面收到所述类文件对象后,生成指向所述类文件对象的统一资源定位符,以及,在页面中创建a标签,将所述类文件对象的所述统一资源定位符赋值给所述a标签的href属性。

5.一种网页中的文件下载的装置,其特征在于,包括:注册模块,用于注册事件驱动应用进程,所述事件驱动应用进程的作用域包括第一页面和第二页面;

第一请求发送模块,用于在所述第一页面发起文件下载请求,并向所述事件驱动应用进程发送请求下载文件消息;

第二请求发送模块,用于在所述事件驱动应用进程收到所述消息后,向服务端发送所述文件下载请求;

以及,在所述事件驱动应用进程收到所述服务端根据所述文件下载请求返回的文件流后,将所述文件流的类文件对象发送至所述第二页面;

文件下载执行模块,用于在所述第二页面收到所述类文件对象后,执行所述文件下载。

6.根据权利要求5所述网页中的文件下载的装置,其特征在于,所述第一请求发送模块通过postmessageapi向所述事件驱动应用进程发送请求下载文件消息。

7.根据权利要求5所述网页中的文件下载的装置,其特征在于,所述第二请求发送模块通过fetchapi向所述服务端发送所述文件下载的请求。

8.根据权利要求5所述网页中的文件下载的装置,其特征在于,所述文件下载执行模块包括:在所述第二页面收到所述类文件对象后,生成指向所述类文件对象的统一资源定位符,以及,在页面中创建a标签,将所述类文件对象的所述统一资源定位符赋值给所述a标签的href属性。

技术总结
本发明提供了一种网页中的文件下载的方法和装置,该方法包括:注册事件驱动应用进程,事件驱动应用进程的作用域包括第一页面和第二页面;在第一页面发起文件下载请求,并向事件驱动应用进程发送请求下载文件消息;事件驱动应用进程收到消息后,向服务端发送文件下载请求;事件驱动应用进程收到服务端根据文件下载请求返回的文件流后,将文件流的类文件对象发送至第二页面;第二页面收到类文件对象后,执行文件下载。用户在点击文件下载之后,不需要强制保持此页面不关闭,可以随意跳转其它页面,待服务端生成文件并返回前端后,在新打开的页面上会自动执行文件下载。

技术研发人员:吕益行;张丹丹;张晋锋;张永生;刘瑞贤;李斌
受保护的技术使用者:曙光信息产业(北京)有限公司
技术研发日:2019.12.25
技术公布日:2020.06.05

转载请注明原文地址: https://bbs.8miu.com/read-55440.html

最新回复(0)