SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试

点击 SmartTable 控件生成的表格控件的 Export to Excel 时,遇到如下错误消息:

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第1张图片

The following error has occurred during export:

Unexpected server response:

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第2张图片

SmartTable 基于的是 OData V4 的模型了:

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第3张图片

Excel export 操作,触发的是一个 batch 请求:

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第4张图片


--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 错误:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第5张图片

对应的 excel button:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第6张图片

实现的源文件:https://sapui5.hana.ondemand....

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第7张图片

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第8张图片

SAP UI5 已经默认使用 web worker 技术在另一个线程里触发 excel 导出的请求了。

如果 worker 参数是 false,默认在主线程里触发,这样可能会阻塞主线程,影响用户体验。

Web Worker:https://developer.mozilla.org...

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第9张图片

我现在的团队要做购物车里商品清单的 Excel 导出功能,这让我马上联想到 SAP UI5 的 Table Excel 导出功能。

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第10张图片

很多有用的信息都在 SAP UI5 源代码的注释里。这些注释有的会出现在 SAP UI5 官网,有的不会。

首先使用 Core.loadLibrary("sap.ui.export", true); 加载 Excel 导出相关的 library:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第11张图片

还是异步加载:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第12张图片

ExportUtils:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第13张图片

ExportHandler.prototype.getExportInstance 什么时候被调用?

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第14张图片

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第15张图片

218 行代码得不到触发:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第16张图片

刷新一次后,调用栈又变了:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第17张图片

我发现使用浏览器刷新按钮,和在地址栏里敲回车,在 Chrome 开发者工具里重新加载新设置的调试器的行为还不太一样:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第18张图片

isMobileTable 的 flag 默认为 true:调用 this._oTable.getColumns(true)
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第19张图片

通过 columns 的 aggregation,获取表格 columns 的内容:

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第20张图片

获得 label 和 width 等信息:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第21张图片

插入 aSheetColumns 数组:

SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第22张图片

最后的 setting 从这里来:
SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试_第23张图片

你可能感兴趣的:(SAP UI5 SmartTable 控件本地运行时进行 Excel 导出的单步调试)