4

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

 1 year ago
source link: https://blog.51cto.com/jerrywangsap/5860810
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

精选 原创

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

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

The following error has occurred during export:

Unexpected server response:

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

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

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

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

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

--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 导出的单步调试_d3_05

对应的 excel button:

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

实现的源文件: https://sapui5.hana.ondemand.com/resources/sap/ui/export/SpreadsheetExport-dbg.js

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

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

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

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

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

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

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

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

首先使用 Core.loadLibrary("sap.ui.export", true); 加载 Excel 导出相关的 library:

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

还是异步加载:

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

ExportUtils:

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

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

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

218 行代码得不到触发:

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

刷新一次后,调用栈又变了:

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

我发现使用浏览器刷新按钮,和在地址栏里敲回车,在 Chrome 开发者工具里重新加载新设置的调试器的行为还不太一样:

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

isMobileTable 的 flag 默认为 true:调用 this._oTable.getColumns(true)

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

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

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

获得 label 和 width 等信息:

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

插入 aSheetColumns 数组:

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

最后的 setting 从这里来:

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

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK