web-dev-qa-db-ja.com

Chrome印刷プレビューはWebページのスタイルを変更します

ショートバージョン：

私はWindows7ProでChrome 27.0.1453.94

Chromeを使用して http://www.try-phpbb.com/30x/ にアクセスします

印刷を選択します... | PDFとして保存

印刷プレビューはWebページのようには見えません-レイアウト、リンク、フォントはすべて間違っています。

どうして？

これを修正して、PDFをWebサイトと同じスタイルにする方法を教えてください。

ロングバージョン：

私は、phpBBフォーラムテンプレート（ https://www.phpbb.com/ ）に基づいた安全なフォーラム（つまり、アクセスするにはログインする必要があります）のメンバーです。次のラウンドのサブスクライバーのためのスペースを確保するために、フォーラムからすべてのスレッドと投稿がまもなくクリアされます。

モデレーターから、各トピック/スレッド/投稿のコンテンツをダウンロードしてPDFファイルに書き込むことを許可されています（奨励されています）。これにより、今後も参照できるようになります。これを自分たちで行うために、ITのバックグラウンドを持っているので、ボランティアで作業を行いましたが、思ったよりも難しいことがわかりました。

私はこのプロセスを次のようにしたいと思っていました...

  1. 「スタイリッシュ」をダウンロードして追加Chrome拡張機能（ https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe ）
  2. CSSコードをStylishに追加して、PDF移行の準備ができているフォーラムページの外観を変更します
  3. In Chrome Print | Save as PDF option to save styled page as a PDF doc
  4. 複数ページのフォーラムの場合は、ページごとにこのプロセスを繰り返し、PDFMate（または同様のもの）を使用してPDFドキュメントを1つの長いPDFに連結します。

手順1、2、4は完全に機能していますが、手順3は機能していません。

Chromeの印刷プレビューは、フォーラムページの外観を台無しにします。レイアウトのスタイルが失われる、フォントが完全に異なる、リンクがない、または見栄えが悪い。たとえば、このページを印刷してみてください（- http://www.try-phpbb.com/30x/ ）-印刷プレビューでは、ブラウザーでの外観とは完全に異なります。

これを修正するために私にできることはありますか？どういうわけか、印刷プレビューバージョンにCSSコードを与えてスタイルを変更できますか？なぜこれが起こるのか誰もが知っていますか？

または、HTMLをPDFに変換する別のソリューションを提案できますか？ Chrome拡張機能 "iWeb2x"と "Send to Google Drive"を試しましたが、成功しませんでした-フォーラムが保護されているため、PDFファイルが作成されますはフォーラムのログインページであり、現在見ているフォーラムスレッドページではありません。

どんな助けでも大歓迎です-ありがとう。

cssgoogle-chromepdfprinting
13
Drew

ここを見てください、多分それは役に立ちます

http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

印刷ページに独自のCSSスタイルを設定できます。

お役に立てば幸いです。

13
BeNdErR

Iframeがdisplay：noneの場合、cssが読み込まれず、正しいCSSスタイルが出力されない場合がありました。あなたはvisibility：hiddenでそれを修正することができます。そしてサイズゼロ

0
Miguel