懷疑前端元件把我的excel檔案搞壞了,怎麼證明

三國夢迴 發表於 2021-07-24
前端 Excel

背景

我在做個需求,使用者通過excel上傳檔案,檔案中,每一行就是一條資料,後臺批量處理;但是呢,使用者填的資料可能有問題,所以我後臺想先做個檢查,然後在每一行中加一列,來指出這一行存在的問題。

我本來想的是,返回一個list(json返回),每個item就是一行資料,在介面上展示即可。

但是後邊又想到,如果直接返回excel,行不行?

好像是可以的。

懷疑前端元件把我的excel檔案搞壞了,怎麼證明

最終就是這樣:接收一個檔案,檢查後,返回原檔案,只是,我自己加了一列,這一列存的是檢查結果。

但是,前端vue用的元件,渲染出來總是有問題,下載下來的檢查結果檔案,開啟是亂碼什麼的。

懷疑前端元件把我的excel檔案搞壞了,怎麼證明

所以,我就想看看,返回的二進位制是不是有問題?

檢測方法

我呼叫了一下那個介面,因為是本地測試,直接用本地wireshark抓包。下面這個是返回的報文,從上到下,依次就是計算機網路那幾層,物理層/鏈路層/ip/tcp/http懷疑前端元件把我的excel檔案搞壞了,怎麼證明

http後邊是什麼呢?可以看到,wireshark很貼心地幫我們做了初步解析,是一個xls檔案格式。裡面也可以看到,這個二進位制流,大概是23040位元組。

懷疑前端元件把我的excel檔案搞壞了,怎麼證明

二進位制有了,接下來就是把這個二進位制變成一個xls檔案,看看這個二進位制有沒有問題。其實哈,正常的下載檔案介面,如果你瀏覽器直接呼叫這個介面下載也可以,但我這邊的前端元件很奇葩,它幫我拿到二進位制後,好像又做了一層轉換,然後我拿到的檔案就有問題了。

所以我才想到說,先拿到轉換前的二進位制測試一下。

這裡直接說最簡單的辦法吧:

懷疑前端元件把我的excel檔案搞壞了,怎麼證明

然後呢?

懷疑前端元件把我的excel檔案搞壞了,怎麼證明

差不多就這樣了。

本來我也嘗試了用二進位制編輯檔案:hex editor來弄,不過比這個繁瑣,算了噻。

另外,大家要比較二進位制的話,可以用beyond compare這個軟體。

懷疑前端元件把我的excel檔案搞壞了,怎麼證明

補充

我發現我搞得太複雜了,這個介面直接用postman之類的工具測試下就行了,果然是有個錘子,到處都是釘子。
懷疑前端元件把我的excel檔案搞壞了,怎麼證明