點選 SmartTable 控制元件生成的表格控制元件的 Export to Excel 時，遇到如下錯誤訊息：

![](https://img-blog.csdnimg.cn/img_convert/18e33a972e881e24035c02428d2a3756.png)

> The following error has occurred during export:

> Unexpected server response:

![](https://img-blog.csdnimg.cn/img_convert/d7c9898b12748f5525dd84977e602645.png)

SmartTable 基於的是 OData V4 的模型了：

![](https://img-blog.csdnimg.cn/img_convert/993da85c6b48f0a8a06db91115b4a28e.png)

Excel export 操作，觸發的是一個 batch 請求：

![](https://img-blog.csdnimg.cn/img_convert/22635c7f498510ca14ffa2b1b9a3b53b.png)

```json

--batch_aaedc4df-e8bd-48e9-8f7b-daf23bd75db4
Content-Type: application/http
Content-Transfer-Encoding: binary

GET Products?$format=json&$select=ProductId%2cPrice%2cCurrencyCode%2cName%2cCategory&$skip=0&$top=14 HTTP/1.1
sap-contextid-accept:header
Accept:application/json
Accept-Language:en-US
DataServiceVersion:2.0
MaxDataServiceVersion:2.0
X-Requested-With:XMLHttpRequest
x-csrf-token:42424242424242424242424242424242

--batch_aaedc4df-e8bd-48e9-8f7b-daf23bd75db4--
```

步驟 147 的 Mock Server，沒有針對這個 batch 請求進行實現。

因此返回 404 Not Found 錯誤：
![](https://img-blog.csdnimg.cn/img_convert/7bc0cfa9eb59f4fe11daa1edb5edebab.png)

對應的 excel button：
![](https://img-blog.csdnimg.cn/img_convert/80e20e401fb201d43b698a1a3dadff19.png)

實現的原始檔：https://sapui5.hana.ondemand.com/resources/sap/ui/export/SpreadsheetExport-dbg.js

![](https://img-blog.csdnimg.cn/img_convert/3a4880bbe75bb8b9a456190015250ec5.png)

![](https://img-blog.csdnimg.cn/img_convert/87e450d2dc0785eac21da9fd10afc21e.png)

SAP UI5 已經預設使用 web worker 技術在另一個執行緒裡觸發 excel 匯出的請求了。

如果 worker 引數是 false，預設在主執行緒裡觸發，這樣可能會阻塞主執行緒，影響使用者體驗。

Web Worker：https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

![](https://img-blog.csdnimg.cn/img_convert/f9c949cee3567832a6a69482bc693a9a.png)

我現在的團隊要做購物車裡商品清單的 Excel 匯出功能，這讓我馬上聯想到 SAP UI5 的 Table Excel 匯出功能。

![](https://img-blog.csdnimg.cn/img_convert/0726f26cb2e4d901642d6368f7da5a60.png)

很多有用的資訊都在 SAP UI5 原始碼的註釋裡。這些註釋有的會出現在 SAP UI5 官網，有的不會。

首先使用 `Core.loadLibrary("sap.ui.export", true);` 載入 Excel 匯出相關的 library：
![](https://img-blog.csdnimg.cn/img_convert/5a782974daae1ea95d56d0d43a7599c0.png)

還是非同步載入：
![](https://img-blog.csdnimg.cn/img_convert/4ea6469b71fec6dcbf0631be3c8d5470.png)

ExportUtils：
![](https://img-blog.csdnimg.cn/img_convert/1fc5589027d53d2a1766fc0b6980dab2.png)

`ExportHandler.prototype.getExportInstance` 什麼時候被呼叫?

![](https://img-blog.csdnimg.cn/img_convert/137e56241b2fdf9ba17d3f5247f22089.png)

![](https://img-blog.csdnimg.cn/img_convert/400406c08129efc290fac754b32e63a3.png)

218 行程式碼得不到觸發：
![](https://img-blog.csdnimg.cn/img_convert/529f33e1ba7826e41e2756164362572b.png)

重新整理一次後，呼叫棧又變了：
![](https://img-blog.csdnimg.cn/img_convert/83863c6a29f7f9438824b68692c2575f.png)

我發現使用瀏覽器重新整理按鈕，和在位址列裡敲回車，在 Chrome 開發者工具裡重新載入新設定的偵錯程式的行為還不太一樣：
![](https://img-blog.csdnimg.cn/img_convert/3321a0be19ff090ad691bced5dd5b6bd.png)

isMobileTable 的 flag 預設為 true：呼叫 `this._oTable.getColumns(true)`
![](https://img-blog.csdnimg.cn/img_convert/82b85d429354b0958011ddf658a16ccb.png)

透過 `columns` 的 aggregation，獲取表格 columns 的內容：

![](https://img-blog.csdnimg.cn/img_convert/8c5efbc4b2d4334c33154d3a8c8aa2df.png)

獲得 label 和 width 等資訊：
![](https://img-blog.csdnimg.cn/img_convert/b8e33a4c343d037f4bd0da071dc7c40f.png)

插入 `aSheetColumns` 陣列：

![](https://img-blog.csdnimg.cn/img_convert/d1b6273707b8030118831a92d9cc792d.png)

最後的 setting 從這裡來：
![](https://img-blog.csdnimg.cn/img_convert/0d0b31e382336264734c85b6bdf2298d.png)

SAP UI5 SmartTable 控制元件本地執行時進行 Excel 匯出的單步除錯

相關文章