本說明書涉及前端，尤其是涉及一種前端頁面的pdf報告生成方法及裝置。

背景技術：

1、網絡靶場(cyber?range)是一種基于虛擬化技術，對真實網絡空間中的網絡架構、系統設備、業務流程的運行狀態及運行環境進行模擬和復現的技術或產品，以更有效地實現與網絡安全相關的學習、研究、檢驗、競賽、演習等行為，從而提高人員及機構的網絡安全對抗水平。用戶可以利用網絡靶場，通過實訓演練的方式來提升所需的技能和經驗，在實訓演練結束后，用戶可以查看自己訓練的得分情況，還可以將自己的得分結果報告通過導出pdf的方式進行下載查看。

2、然而，目前網絡靶場前端常用的pdf導出方式是結合第三方canvas生成插件和第三方pdf生成插件實現pdf報告的導出，具體來說，使用第三方canvas生成插件先將前端頁面中的指定部分截取成圖像，再通過第三方pdf生成插件將截取好的圖像生成pdf報告進行導出，其中，第三方canvas生成插件可以獲取前端頁面中的dom元素，將指定的dom元素轉換成圖像的格式，但是第三方canvas生成插件截取的圖像存在著缺陷，由于第三方canvas生成插件不支持css偽元素的渲染，導致前端頁面中的偽元素部分在截取出來的圖像中會展示錯亂，因此亟需一種前端頁面的pdf報告生成方法，避免前端頁面中的偽元素部分在截取出來的圖像中展示錯亂，提高前端導出pdf報告的精準度。

技術實現思路

1、鑒于目前網絡靶場前端常用的pdf導出方式是結合第三方canvas生成插件和第三方pdf生成插件實現pdf報告的導出，具體來說，使用第三方canvas生成插件先將前端頁面中的指定部分截取成圖像，再通過第三方pdf生成插件將截取好的圖像生成pdf報告進行導出，其中，第三方canvas生成插件可以獲取前端頁面中的dom元素，將指定的dom元素轉換成圖像的格式，但是第三方canvas生成插件截取的圖像存在著缺陷，由于第三方canvas生成插件不支持css偽元素的渲染，導致前端頁面中的偽元素部分在截取出來的圖像中會展示錯亂，提出了本方案以便克服上述問題或者至少部分地解決上述問題。

2、一方面，本說明書的一些實施例的目的在于提供一種前端頁面的pdf報告生成方法，所述方法包括：

3、接收pdf報告生成請求；

4、根據所述pdf報告生成請求對真實dom設置css樣式，以使真實dom對應的展示形式與偽元素對應的展示形式相同；

5、控制目標前端頁面對所述真實dom進行展示，并獲取所述真實dom的全部節點；

6、基于全部節點，利用預設的canvas生成插件對所述目標前端頁面進行截取，得到截取圖像；

7、根據所述截取圖像生成目標前端頁面的pdf報告。

8、進一步地，根據所述pdf報告生成請求對真實dom設置css樣式，以使真實dom對應的展示形式與偽元素對應的展示形式相同，包括：

9、根據所述pdf報告生成請求獲取偽元素對應的選擇器樣式信息；

10、根據選擇器樣式信息對真實dom設置css樣式，以使真實dom對應的展示形式與偽元素對應的展示形式相同。

11、進一步地，控制目標前端頁面對所述真實dom進行展示，并獲取所述真實dom的全部節點，包括：

12、利用預設的控制變量，控制目標前端頁面對所述真實dom進行展示；

13、利用預設的節點捕獲算法，獲取所述真實dom的最外層節點，并根據最外層節點向內層節點遍歷，得到所述真實dom的全部節點。

14、進一步地，一些實施例中，在生成目標前端頁面的pdf報告后，利用預設的控制變量，控制所述目標前端頁面從對所述真實dom進行展示變更為對所述偽元素進行展示。

15、進一步地，基于全部節點，利用預設的canvas生成插件對所述目標前端頁面進行截取，得到截取圖像，包括：

16、利用預設的canvas生成插件得到全部節點對應的canvas圖像，并根據canvas圖像得到截取圖像及截取圖像對應的尺寸信息和排版格式信息。

17、進一步地，根據所述截取圖像生成目標前端頁面的pdf報告，包括：

18、利用預設的pdf生成插件初始化pdf實例；

19、基于截取圖像對應的尺寸信息和排版格式信息，將所述截取圖像添加至所述pdf實例中，以生成pdf報告。

20、另一方面，本說明書的一些實施例還提供一種前端頁面的pdf報告生成裝置，所述裝置包括：

21、接收模塊，用于接收pdf報告生成請求；

22、設置模塊，用于根據所述pdf報告生成請求對真實dom設置css樣式，以使真實dom對應的展示形式與偽元素對應的展示形式相同；

23、展示模塊，用于控制目標前端頁面對所述真實dom進行展示，并獲取所述真實dom的全部節點；

24、截取模塊，用于基于全部節點，利用預設的canvas生成插件對所述目標前端頁面進行截取，得到截取圖像；

25、生成模塊，用于根據所述截取圖像生成目標前端頁面的pdf報告。

26、另一方面，本說明書的一些實施例還提供了一種計算機設備，包括存儲器、處理器、以及存儲在所述存儲器上的計算機程序，所述計算機程序被所述處理器運行時，執行上述方法的指令。

27、另一方面，本說明書的一些實施例還提供了一種計算機存儲介質，其上存儲有計算機程序，所述計算機程序被計算機設備的處理器運行時，執行上述方法的指令。

28、另一方面，本說明書的一些實施例還提供了一種計算機程序產品，所述計算機程序產品包括計算機程序，所述計算機程序被計算機設備的處理器運行時，執行上述方法的指令。

29、本說明書的一些實施例提供的一個或者多個技術方案，至少具有如下的技術效果：

30、本說明書的實施例自動接收pdf報告生成請求，根據pdf報告生成請求對目標前端頁面中的真實dom設置css樣式，以使真實dom對應的展示形式與偽元素對應的展示形式相同，由于目標前端頁面原本是通過偽元素對應的展示形式進行展示的，并且此時直接對目標前端頁面進行pdf導出存在錯亂的問題，因此需要控制目標前端頁面對真實dom進行展示，并獲取所述真實dom的全部節點，基于全部節點，利用預設的canvas生成插件對此時的目標前端頁面進行截取，得到不會發生錯亂的截取圖像，從而根據截取圖像高效、精準生成目標前端頁面的pdf報告。

31、上述說明僅是本說明書的一些實施例技術方案的概述，為了能夠更清楚了解本說明書的一些實施例的技術手段，而可依照說明書的內容予以實施，并且為了讓本說明書的一些實施例的上述和其它目的、特征和優點能夠更明顯易懂，以下特舉本說明書的一些實施例的具體實施方式。

技術特征：

1.一種前端頁面的pdf報告生成方法，其特征在于，所述方法包括：

2.根據權利要求1所述的方法，其特征在于，根據所述pdf報告生成請求對真實dom設置css樣式，以使真實dom對應的展示形式與偽元素對應的展示形式相同，包括：

3.根據權利要求1所述的方法，其特征在于，控制目標前端頁面對所述真實dom進行展示，并獲取所述真實dom的全部節點，包括：

4.根據權利要求3所述的方法，其特征在于，進一步包括：

5.根據權利要求1所述的方法，其特征在于，基于全部節點，利用預設的canvas生成插件對所述目標前端頁面進行截取，得到截取圖像，包括：

6.根據權利要求5所述的方法，其特征在于，根據所述截取圖像生成目標前端頁面的pdf報告，包括：

7.一種前端頁面的pdf報告生成裝置，其特征在于，所述裝置包括：

8.一種計算機設備，包括存儲器、處理器、以及存儲在所述存儲器上的計算機程序，其特征在于，所述計算機程序被所述處理器運行時，執行根據權利要求1-6任意一項所述方法的指令。

9.一種計算機存儲介質，其上存儲有計算機程序，其特征在于，所述計算機程序被計算機設備的處理器運行時，執行根據權利要求1-6任意一項所述方法的指令。

10.一種計算機程序產品，其特征在于，所述計算機程序產品包括計算機程序，所述計算機程序被處理器運行時，執行根據權利要求1-6任意一項所述方法的指令。

技術總結
本說明書涉及前端技術領域，提供了一種前端頁面的PDF報告生成方法及裝置。該方法包括：接收PDF報告生成請求；根據所述PDF報告生成請求對真實DOM設置CSS樣式，以使真實DOM對應的展示形式與偽元素對應的展示形式相同；控制目標前端頁面對所述真實DOM進行展示，并獲取所述真實DOM的全部節點；基于全部節點，利用預設的Canvas生成插件對所述目標前端頁面進行截取，得到截取圖像；根據所述截取圖像生成目標前端頁面的PDF報告。通過本說明書實施例，可提高前端導出PDF報告的精準度。

技術研發人員：張實君,曾婧,李碩,徐相森,汪天祥,來驥,楊睿,孟德,段西寧,申雨鑫,王海超,高賽,顏科
受保護的技術使用者：國網冀北電力有限公司信息通信分公司
技術研發日：
技術公布日：2025/4/24