天天看点

前端用vue,后端用go语言,给客户做了一个同步芒果店长订单数据的系统,其中有一个导出订单的功能,搞得我焦头烂额,差点翻

作者:一个哲学家

前端用vue,后端用go语言,给客户做了一个同步芒果店长订单数据的系统,其中有一个导出订单的功能,搞得我焦头烂额,差点翻船!

这个功能大体分两步。第一步是把订单数据从数据库中读取然后写入xlsx表格,第二步再把表格数据下载下来。

第一步用了第三方包excelize,不得不说用excelize来处理表格还是非常方便的。当然了,生成表格也遇到了一个问题,就是客户需要把图片写入到表格中。网络上找了一下资料,发现别人都是把本地图片写入表格,只需要知道图片路径就可以了。而我要把网络图片写入表格,和别人的案例不同。后来通过网络请求,获得图片数据,然后进行转化,写入到表格。

第二步下载数据功能其实很快就实现了,但是为了优化用户体验,花了我两天时间才搞定。go语言后端生成数据流,然后把数据流发送到前端,在vue中用window.URL.createObjectURL生成文件地址,然后很轻松的就把表格文件下载到本地了。

当数据量上去后,本来后台生成表格数据就需要几分钟,前端又必须把数据完全下载后才开始导出表格,这个等待时间就太长了,用户体验极端不好。我希望后端数据生成后,前端就能感知到,让用户知道数据已经开始下载了。网上找了一下资料,各种代码看得眼花缭乱,最后发现streamsaver可以实现我要的功能。使用streamsaver后,数据开始下载就会弹出下载框,可以看到数据下载状态,这样用户体验就好多了!

搞定!

前端用vue,后端用go语言,给客户做了一个同步芒果店长订单数据的系统,其中有一个导出订单的功能,搞得我焦头烂额,差点翻
前端用vue,后端用go语言,给客户做了一个同步芒果店长订单数据的系统,其中有一个导出订单的功能,搞得我焦头烂额,差点翻
前端用vue,后端用go语言,给客户做了一个同步芒果店长订单数据的系统,其中有一个导出订单的功能,搞得我焦头烂额,差点翻

继续阅读