如何列印包含完整程式碼片段且不遺失圖像的網頁?

如何列印包含完整程式碼片段且不遺失圖像的網頁?

我想列印網頁https://www.journaldev.com/3524/spring-hibernate-integration-example-tutorial轉換為 pdf 檔。

在Chrome瀏覽器中,我右鍵單擊網頁並選擇“列印...”,然後建立了pdf文件

  • 不包含“Spring Hibernate 整合範例專案結構”部分中的圖像

  • 僅包含部分程式碼片段,不滾動上下捲軸無法完全顯示

我想知道是否有某種方法可以列印而不會出現上述問題?尤其是第二個問題。

我使用 Ubuntu 16.04 作為我的作業系統。

謝謝。

答案1

第一種方法

一種方法是使用檢查元素來編輯 css。右鍵單擊頁面中的任何程式碼片段並選擇“檢查元素”。

現在參考下圖並取消選取右側頁面的 max-height 屬性。

取消選取最大高度屬性

無需刷新頁面,按Ctrl+P即可列印。

注意:刷新頁面後,頁面會回到之前的狀態

如果您想對同一網站上的其他頁面執行相同的操作,第二種方法比第一種方法更好。

第二種方法

實現此目的的其他方法是在該特定網站的網站設定中停用 JavaScript。但是您會錯過程式碼片段中的語法突出顯示。

轉至chrome://settings/content/siteDetails?site=https%3A%2F%2Fwww.journaldev.com,它允許您更改該網站的網站設定。

預設允許使用 JavaScript,因此您需要停用它。

禁用 JavaScript

現在重新載入網頁並按Ctrl+進行P列印。

當我嘗試列印時,我發現中間有一些間隙。但您可以使用檢查元素輕鬆刪除它。查看指南這裡

來源

希望這可以幫助。

相關內容