このWebページをコードスニペット全体で、画像を失わずに印刷するにはどうすればよいですか？

Webページhttps://www.journaldev.com/3524/spring-hibernate-integration-example-tutorialをPDFファイルに印刷したい。

Chromeブラウザーで、Webページを右クリックして[印刷...]を選択すると、作成されたPDFファイル

• 「Spring Hibernate Integration Example Project Structure」セクションに画像が含まれていない

• 上下のスクロールバーをスクロールしないと完全に表示できないコードスニペットの一部のみが含まれます

上記の問題なしで印刷する方法があるかどうか疑問に思っていましたか？特に2番目の問題。

私はOSとしてUbuntu 16.04を使用しています。

ありがとう。

最初の方法

これを行う1つの方法は、inspect要素を使用してcssを編集することです。ページ内の任意のコードスニペットを右クリックして、[要素の検査]を選択します。

以下の画像を参照して、右側のページからmax-heightプロパティのチェックを外してください。

ページを更新せずに、Ctrl+ Pを押して印刷します。

注：ページを更新すると、ページは以前の状態に戻ります

同じサイトの他のページで同じことをしたい場合は、2番目の方法が最初の方法よりも優れています。

第二の方法

これを実現する他の方法は、この特定のサイトのサイト設定でJavaScriptを無効にすることです。ただし、コードスニペットで構文の強調表示を見逃すことになります。

に移動するとchrome://settings/content/siteDetails?site=https%3A%2F%2Fwww.journaldev.com、そのサイトのサイト設定を変更できます。

JavaScriptはデフォルトで許可されているため、無効にする必要があります。

次に、Webページをリロードし、Ctrl+ Pを押して印刷します。

印刷しようとすると、間にギャップが見つかりました。ただし、inspect要素を使用して簡単に削除できます。こちらのガイドをご覧ください。

ソース

お役に立てれば。