天天看點

前端用vue,後端用go語言,給客戶做了一個同步芒果店長訂單資料的系統,其中有一個導出訂單的功能,搞得我焦頭爛額,差點翻

作者:一個哲學家

前端用vue,後端用go語言,給客戶做了一個同步芒果店長訂單資料的系統,其中有一個導出訂單的功能,搞得我焦頭爛額,差點翻船!

這個功能大體分兩步。第一步是把訂單資料從資料庫中讀取然後寫入xlsx表格,第二步再把表格資料下載下傳下來。

第一步用了第三方包excelize,不得不說用excelize來處理表格還是非常友善的。當然了,生成表格也遇到了一個問題,就是客戶需要把圖檔寫入到表格中。網絡上找了一下資料,發現别人都是把本地圖檔寫入表格,隻需要知道圖檔路徑就可以了。而我要把網絡圖檔寫入表格,和别人的案例不同。後來通過網絡請求,獲得圖檔資料,然後進行轉化,寫入到表格。

第二步下載下傳資料功能其實很快就實作了,但是為了優化使用者體驗,花了我兩天時間才搞定。go語言後端生成資料流,然後把資料流發送到前端,在vue中用window.URL.createObjectURL生成檔案位址,然後很輕松的就把表格檔案下載下傳到本地了。

當資料量上去後,本來背景生成表格資料就需要幾分鐘,前端又必須把資料完全下載下傳後才開始導出表格,這個等待時間就太長了,使用者體驗極端不好。我希望後端資料生成後,前端就能感覺到,讓使用者知道資料已經開始下載下傳了。網上找了一下資料,各種代碼看得眼花缭亂,最後發現streamsaver可以實作我要的功能。使用streamsaver後,資料開始下載下傳就會彈出下載下傳框,可以看到資料下載下傳狀态,這樣使用者體驗就好多了!

搞定!

前端用vue,後端用go語言,給客戶做了一個同步芒果店長訂單資料的系統,其中有一個導出訂單的功能,搞得我焦頭爛額,差點翻
前端用vue,後端用go語言,給客戶做了一個同步芒果店長訂單資料的系統,其中有一個導出訂單的功能,搞得我焦頭爛額,差點翻
前端用vue,後端用go語言,給客戶做了一個同步芒果店長訂單資料的系統,其中有一個導出訂單的功能,搞得我焦頭爛額,差點翻

繼續閱讀