SAP UI5 應用開發教程之一百零二 - SAP UI5 應用的列印(Print)功能實現詳解試讀版

i042416發表於2022-06-30

一套適合 SAP UI5 初學者循序漸進的學習教程

作者簡介

Jerry Wang,2007 年從電子科技大學計算機專業碩士畢業後加入 SAP 成都研究院工作至今。Jerry 是 SAP 社群導師,SAP 中國技術大使。在長達 15 年的 SAP 標準產品開發生涯裡,Jerry 曾經先後參與 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(電商雲)等標準產品的研發工作。

Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 進行開發, 對包括 SAP UI5 在內的多款 SAP 自研框架有深入的研究。

教程目錄

說明

Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5,曾經在 SAP 社群和“汪子熙”微信公眾號上發表過多篇關於 SAP UI5 工作原理和原始碼解析的文章。

在 Jerry 這篇文章 對 SAP UI5 一無所知的新手,從哪些材料開始學習比較好? 曾經提到,Jerry 也是從 SAP UI5 菜鳥一路走過來,深知只有 ABAP 開發背景的開發者,向 SAP UI5 開發領域轉型的不易,因此我在業餘時間設計了這份適合 SAP UI5 初學者的學習教程,把開發一個完整的 SAP UI5 應用的流程,拆分成若干個步驟,力求每個步驟裡,把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 原始碼分析系列文章那麼深入,但力求淺顯易懂,便於 SAP UI5 初學者理解。

本教程每一個步驟的原始碼,都存放在我的 Github 上,分別用資料夾 01,02,03 等等來標識,例如步驟 1 的原始碼在這裡

每一個步驟均是前一步驟的基礎上,新增了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者,按照順序從第一個步驟開始循序漸進地學習,把這些程式碼下載到本地,配合教程的文字講解,自己動手,以加深理解。

大家如果對教程的每個步驟有任何疑問,歡迎在教程對應的步驟文章裡給我評論,進行留言。

很多朋友都在諮詢我如何實現 SAP UI5 的列印(print)功能,本步驟就該需求專門進行介紹。

SAP UI5 應用實現列印功能,有兩種思路:

  • 第一種思路:在後臺伺服器生成要列印的文件原始碼,比如 PDF,Word 或 Excel 等格式,然後通過 HTTP 請求傳遞給 SAP UI5 應用。如果 SAP UI5 連線的後臺系統是 ABAP ,那麼在 ABAP 端生成這些格式的文件,是 ABAP 的強項之一。本教程後續會介紹。
  • 第二種思路:在前臺即 SAP UI5 應用內,生成要列印的文件內容。這是本步驟要詳細介紹的實現方式。

開啟下面的 url:

http://localhost:8080/index.html

點選 列印 按鈕:

就能看到彈出了瀏覽器自帶的列印預覽介面(Print Preview),如下圖所示。預覽頁面左邊,是最後待列印出的表格的介面預覽,右邊的螢幕,是選擇印表機,列印頁數,列印佈局是 Portrait 還是 Landscape,紙張大小等等。

下面是列印功能實現的詳細步驟。

相關文章