如何扩展标准Fiori Elements应用实现筛选数据打印功能

原生打印能力说明 #

Fiori Elements 分析类场景默认没有提供全量结果集的原生打印能力，标准内置输出能力仅面向单业务对象的表单类打印，分析表格因为涉及动态加载、分页适配、维度自定义等复杂逻辑，没有做通用的打印功能内置。

可行实现路径汇总 #

• 通过BAS扩展应用新增自定义打印按钮：在页面页眉操作区扩展自定义操作按钮，绑定自行实现的打印逻辑
• 视口内容导出打印：通过前端类库将当前页面可见区域导出为PDF/图片直接调起打印，缺点是无法覆盖虚拟滚动加载的视口外内容
• 全量数据自定义排版打印：拉取当前筛选条件下的全量结果集，自行拼接打印用表格结构后调起打印，是大表格场景的最优方案

现有DOM提取脚本的问题 #

你编写的jQuery打印脚本仅能提取当前视口内已渲染的表格内容，Fiori Elements的分析表默认开启虚拟滚动机制，视口范围外的行DOM会被动态销毁，不会常驻页面，因此直接抓取DOM无法拿到全量数据。
现有实现脚本如下：

const table = [];
const tabledetails = {};
const getAnalyticalTable = () => {
    $.each($('table'), function(){
      let id = $(this).attr('id');
      let prefix = id.split("--")[0];
      let tabledesc = id.split("--")[1];

      if(id.indexOf("analyticalTable") !== -1)
      {
        table.includes(prefix) ? "" : table.push(prefix);
        table.includes(tabledesc) ? "" : table.push(tabledesc);
      }
      
   });

      for (let i = 0; i < table.length; i++)
      {
    if(table[i].indexOf("header") !== -1)
    {
       tabledetails['header'] = $(document.getElementById(table[0]+"--"+table[i]));
    }
    if(table[i].indexOf("-table") !== -1 && table[i].indexOf("-fixrow-bottom") === -1)
    {
       tabledetails['body'] = $(document.getElementById(table[0]+"--"+table[i]));
    }
    if(table[i].indexOf("fixrow-bottom") !== -1)
    {
       tabledetails['footer'] = $(document.getElementById(table[0]+"--"+table[i]));
    }
      }
    
    return tabledetails;
}



const buildPrintableTable = (tabledetails) => {
    let table = '<table><thead><tr>';
    $.each(tabledetails['header'].find('td'), function(){
        table += '<th>'+$(this).text()+"</th>";
    });
    table += "</tr></thead>";

    $.each(tabledetails['body'].find('tr'), function(){
        table += '<tr>';
        $.each($(this).find('td'), function() {
            table += '<td>'+$(this).text()+"</td>";
        });
        table += '</tr>';
    });

    table += "<tbody>";

    return table;
}

const printTable = (html) => {
    var win = window.open("about:blank", "Print View");
    win.document.write(
    '<html>\
      <body>\
      </body>\
      </html>');
      win.document.writeln(html);
      setTimeout(function() {
        win.document.close();
        win.focus();
     //   win.print();
     //  win.close();
      
     }, 300);
}

let tableData = getAnalyticalTable();
let htmlTable = buildPrintableTable(tableData);
printTable(htmlTable);

客户端加载全量数据的实现方案 #

有两种可落地的实现方式，根据数据量大小选择即可：

• 直接拉取全量业务数据（推荐，无性能问题）
  做BAS扩展时，先通过控件ID拿到分析表实例，读取当前表格绑定的所有筛选条件、排序规则、维度展开状态，直接调用对应OData服务的read接口拉取全量数据：可以一次性将$top参数设置为大于结果集总数的值，也可以分页循环拉取直到取完所有数据。拿到全量结构化数据后，直接拼接适配打印样式的HTML表格，写入新开的空白页调起window.print()即可，完全不依赖页面DOM渲染，不受虚拟滚动机制影响，数据量较大时也不会卡顿。
• 临时关闭虚拟滚动强制渲染全量DOM（仅适合小数据量场景）
  拿到分析表实例后，临时修改控件的growingThreshold参数为当前结果集总条数，关闭虚拟滚动，等待表格完成全量行渲染后，再执行你写的DOM提取打印逻辑，打印完成后恢复原来的虚拟滚动配置即可。注意如果结果集超过1000条，这个方案会导致页面长时间卡顿甚至无响应，仅适合小数据量场景临时使用。

内容的提问来源于stack exchange，提问作者toffler