救助: 前端根据 api 请求后端返回数据,并把数据导出成 csv。现在的问题在后端返回的数据很多,会导致传输时间久,并且有可能会导致浏览器崩溃,实践中有没有什么好的办法去实现这种大数量的导出

2021-02-23 14:16:20 +08:00
 howells

前端根据 api 请求后端返回数据,并把数据导出成 csv 。现在的问题在后端返回的数据很多,会导致传输时间久,并且有可能会导致浏览器崩溃,实践中有没有什么好的办法去实现这种大数量的导出。

4278 次点击
所在节点    JavaScript
37 条回复
lemonada
2021-02-23 14:19:48 +08:00
为啥不是后端生成 csv,给个地址前端让浏览器获取下载链接然后下载呢
waiaan
2021-02-23 14:19:55 +08:00
后端直接生成文件
howells
2021-02-23 14:23:44 +08:00
@lemonada 因为最开始数据量少的时候,就直接去拿了,然后前端根据组件去导出了,所以现在量大了之后,就还是在沿用这个思路。直接生成文件,我试试
fucUup
2021-02-23 15:17:41 +08:00
Indexeddb 就是这个
azcvcza
2021-02-23 15:18:14 +08:00
1,分页去获取喽,一次拿一点,拿到最后自己拼起来 2,直接下 csv 文件
nbhaohao
2021-02-23 15:20:28 +08:00
新增一个 “下载中心” 模块,每次生成文件就是发请求到后端,后端负责创建一个生成文件的内容。
然后前端可以去“下载中心”去下载已经生成好的文件。
jydeng
2021-02-23 15:24:38 +08:00
赞同 6L,加一个下载模块,后端生成完了,通过聊天工具通知。
admin7785
2021-02-23 15:39:17 +08:00
后端生成文件,可以参考 Easyexcel 工具,导出很方便
howells
2021-02-23 16:09:16 +08:00
@nbhaohao 这个生成的文件就还得存储下来是不,然后等你去点击下载?
Python77
2021-02-23 16:10:34 +08:00
后端生成文件
NikoXu
2021-02-23 16:12:32 +08:00
返回文件流不就行了 ,没必要保存成文件吧
howells
2021-02-23 16:14:16 +08:00
@NikoXu 我想的是他这种设计是因为生成文件时间久,如果能直接生成文件流,应该就不用还多一个下载中心吧
NikoXu
2021-02-23 16:17:59 +08:00
文件流直接可以下载了
howells
2021-02-23 16:22:50 +08:00
@NikoXu 不矛盾,能快速生成文件流,它就可以直接在点下载的,我根据的 6L 的方案 =》“每次生成文件就是发请求到后端,后端负责创建一个生成文件的内容” 我说这个是不是要保存下来,然后在去下载中心点下载,
676529483
2021-02-23 16:25:36 +08:00
其实只要后端实现个接口,设置请求头,返回文件流,前端标记为 download,浏览器就自动流下载流
nbhaohao
2021-02-23 16:26:28 +08:00
@howells 是的,比如后端还可以做别的需求,例如文件只保留 7 天,然后前端去点击下载,下载的时候只要能拿到文件地址就可以了,比如一个 oss 地址。

同时第一次点击“生成文件”的时候,后端的接口可以快速返回 response,即告诉用户,这个导出任务已经在执行了,然后接口慢慢去生成就可以了。
nbhaohao
2021-02-23 16:28:49 +08:00
@howells 总结下来就是,“文件生成”的逻辑不要放在前端。
其他答主的说法也都是对的,
文件小的话,后端直接返回文件流,或者返回一个 url,然后前端下载就好了,
文件大的话,最好考虑“下载中心”,就是先让这个请求快速结束,而不是强迫用户一定要开着浏览器慢慢等那个文件生成完毕。
someonedeng
2021-02-23 17:05:02 +08:00
还不如让后端做个导出,分分钟的事,返回文件流或对象储存连接都行
w504391883
2021-02-23 17:08:42 +08:00
直接前台下载文件流,不要在代码中打开
ivanshaoaz
2021-02-23 17:09:54 +08:00
做成异步任务也行 后端生成文件 前端轮训文件生成结果 后端生成文件成功返回个下载链接

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/755455

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX