SAP Fiori 应用实现内容秒截屏并自动导出图片文件的高能技巧

笔者的知识星球里有朋友提问：

想在 SAP UI5 Freestyle 开发里引入一个按钮，点击之后，可以把当前 SAP UI5 应用的界面，截屏并自动另存为本地图片文件。

笔者的SAP UI5 开发教程，有两篇文章阐述了如何把 SAP UI5 的表格控件内容，导出成本地 Excel 文件，并在导出过程中添加格式控制：

SAP UI5 应用开发教程之一百四十八 - SAP UI5 表格数据如何导出成 Excel 文件(Table Export As Excel)

SAP UI5 应用开发教程之一百四十九 - SAP UI5 Table 控件数据进行 Excel 导出时如何进行格式控制

对于浏览器截屏并自动导出截屏内容成本地图片文件，实现这个需求的方法有很多，笔者本文只分享一种实现代价最小的解决方案。

面对这种需求，笔者的想法就是，有轮子就绝不自己动手写代码。

Github 上有这样一个 HTML 转图片的开源工具，又是一个 30 多万 stars 的优秀轮子。

https://github.com/niklasvh/html2canvas

像其名称「html2canvas」暗示的一样，这个工具并不直接将 HTML 页面转换成图片，而是将 HTML 转换成 canvas，拿到这个 canvas 之后，前端开发工程师就可以为所欲为了。

在现代 Web 开发语境里，canvas 元素常被视作浏览器提供给前端工程师的一块「位图布」。

借助 JavaScript，前端开发人员能够在这块布上即时绘制点、线、面，甚至 3D 场景，并把生成的像素流推向 GPU，获得接近桌面应用的渲染性能。

实际上笔者之前的 SAP UI5 开发生涯中，也曾经多次利用 canvas 来实现各种需求：

雪妖现世：给SAP Fiori Launchpad增添雪花纷飞的效果

使用 SAP UI5 渲染和显示二维码？60 秒钟搞定

而 html2canvas，其核心思路是「在客户端」把 HTML 片段渲染成 canvas，再导出位图。因此它并非真正意义上的屏幕快照工具，而是 DOM 到 canvas 的再绘制器。

html2canvas 流程可以概括为四步：遍历 DOM、解析样式、按层绘制到离屏 Canvas、输出 Base64 或二进制位图。

由于全部逻辑都运行在浏览器线程，html2canvas 本身不会突破同源策略，所以不会引入额外的安全问题。

笔者利用 html2canvas 在 SAP UI5 应用里做了一个例子，演示效果如下：点击 SAP UI5 应用右上角的截图按钮，会将当前应用的完整页面截取下来，另存为 png 文件并自动下载到本地。

这个例子的完整实现步骤和源代码，笔者已经放到了我的SAP UI5 开发教程中去，扫码即可阅读。