将复杂的UI5视图生成为PDF（客户端）

2020-09-07 18:37发布

点击此处---> 群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流）群内免费提供SAP练习系统（在群公告中）

您好！

我一直在努力从包含各种表/列表和表格（uxap页）的UI5视图在客户端创建可读（简单，视觉上可接受）的PDF文件。最初，我尝试了使用Google Chrome浏览器的"以PDF格式打印"解决方案的简单方法，但是生成的pdf在页面的中间部分结束（基本上只打印您看到的部分）。

那是我开始摆弄jsPdf的时候，因为它有多种创建pdf的选项。我希望数据以文本（而不是图像）形式显示。最初，我试图通过提供主要div ID来创建pdf，这导致jsPdf生成器产生错误（我想这与包装div有关）。

因此，在没有找到"魔术"，简单，自动的方式将我的视图生成为pdf的方式中，我开始编写代码，该代码获取结构化对象，保存视图的所有数据，并开始与之"同行"。 walk方法检查零件的类型-当零件是数组类型时，它使用jsPdf.autoTable创建表；当零件是对象时，它应该根据键值对创建表单的东西。

现在，我已经设法完成了可自动零件的原型，但是我遇到了一些问题-表格通常有很多列，视觉效果不是很吸引人。此外-由于对象键就像'firstName'或更糟..'upFlrMgmgngmgnnt'（弥补了..但'Upper Floor Management'是这种情况），我仍然必须在代码中写入所有列名（不是动态* let标头= [Object.keys（aTable [0]）。reduce（function（acc，current）{acc [current] = current; return acc;}，{}）]; * 创建我想要的pdf的方法。

所以-如果有人对从UI5页面生成此类（大）pdf有所建议，那么我将非常有兴趣听到您对此的看法或想法-也许您可以分享您的知识：）。

最诚挚的问候，

马里奥

2条回答

Doze时光

1楼 · 2020-09-07 19:24.采纳回答

我通常会推迟前端PDF生成，因为它远非理想。

但是，生成HTML页面并使用window.print（）将其打印到浏览器中非常容易，从而用户可以另存为PDF。您可以创建HTML字符串，也可以从dom中获取最上面所需的div，然后转换为字符串并将其传递给window.print（）。

代楠1984

2楼-- · 2020-09-07 19:18

嗨，卢克，

感谢您的输入-到目前为止，我使用window.print（）。我还尝试了jsPdf + html2Canvas解决方案，但无法使用复杂的视图（虽然没有html2Canvas和它起作用的CSS，但是缺少必要的样式）-pdf出现空白或倾斜。

通过window.print和一些CSS样式的调整，整体结果相当不错。

再次感谢

马里奥（Mario）