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


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

    The following error has occurred during export:

    Unexpected server response:

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

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

    
    --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--
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    步骤 147 的 Mock Server,没有针对这个 batch 请求进行实现。

    因此返回 404 Not Found 错误:

    对应的 excel button:

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

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

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

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

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

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

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

    还是异步加载:

    ExportUtils:

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

    218 行代码得不到触发:

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

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

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

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

    获得 label 和 width 等信息:

    插入 aSheetColumns 数组:

    最后的 setting 从这里来:

  • 相关阅读:
    日常开发小汇总(7) 通用防抖函数
    【数据结构】——排序算法的相关习题
    学习笔记:如何在 Vue 项目中使用 MQTT
    SpringBoot_整合PageHelper
    css选择器
    Java Random.setseed()方法具有什么功能呢?
    C语言选择排序
    如何快速免费的给PDF文件加密呢
    rsync+inotify远程同步
    linux下常用的终端命令
  • 原文地址:https://blog.csdn.net/i042416/article/details/127884515