web-dev-qa-db-ja.com

HTMLをPDFスクロール可能な領域内のコンテンツの可視性を維持する）に変換する方法

質問

HTMLコンテンツをPDF

  1. " ページをPDFに印刷 " Firefox用プラグイン（スクロール可能な領域のコンテンツは保持されますが、表示されません）
  2. CutePDF Writerコンテンツがありません（フォーマットなし、ただし読み取り可能）
  3. HTMLとして保存->で開くMicrosoft Word 2010-> PDF（フォーマットが破棄されます）

スクロール可能な領域内のコンテンツが正しく表示されるようにする方法はありますか？

シナリオ例：

スタックオーバーフローの質問 スクリーンショット

A stackoverflow question

ご覧のとおり、スクロールビューによって隠されたコードがいくつかあります。

変換後、その非表示部分がPDFにありません

After conversion

firefoxmicrosoft-wordpdfhtml
3
bhathiya-perera

根本的な原因

この特定のケースでは、問題の根本的な原因はstackoverflow.comのスタイルシートの不足です。

別のサイトのCSS （codereview.stackexchange.comなど）を調べると、次のように表示されます。

@media print {
    …

    pre {
        max-height: none;
        display: block;
        width: 600px;
        height: auto;
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap !important;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        Word-wrap: break-Word;
        clear: both
    }

    …
}

重要なプロパティはwhite-space: pre-wrapです。

回避策

Firebug 、 Web Developer 、 Stylish などのFirefoxプラグインを使用して、印刷前にスタイルルールを一時的に微調整できます。このような変更は、ページがアンロードされた後も持続しません。

または、 userContent.css を編集することにより、アドオンなしでCSSを半永久的にオーバーライドできます。具体的には、このレイアウトの問題を解決する最も狭いカスタマイズは次のとおりです。

@-moz-document domain(stackoverflow.com) {
    @media print {
        pre {
            white-space: pre-wrap;
        }
    }
}

userContent.cssを適用した後

Successful output

非表示のコードは保持されます。

1
200_success

解決策1：出力PDF（読み取り可能、スタイルは保持されません）

使用 読みやすさプラグイン またはウェブサイト

読みやすさは、どこにいても優れた読書体験を提供し、読者と好きな作家をつなぐシステムを提供することを目的とした無料の読書プラットフォームです。

印刷編集 プラグイン付き

印刷編集では、印刷プレビューモードでWebページのコンテンツを編集できます。印刷する前にWebページを編集すると、レイアウトを圧縮して、広告、サイドバー、空白ページなどの不要なコンテンツを削除できます。

印刷編集モードでは、印刷プレビューモードで印刷する前に、表示されているコンテンツ要素をフォーマット、非表示、または削除できます。印刷編集モードと印刷プレビューモードを繰り返し切り替えることができます。

手順：

  1. 読みやすさに記事を追加
    Add Article To Readability
  2. 満足するまで外観を変更する
    How It looks
  3. [印刷] [編集]をクリックします
    Print Edit
  4. ものを削除する
    enter image description here
  5. プレビューを押します
  6. ページ設定を押して変更を加えます
  7. PDFを作成次にPDFを保存を押します
  8. ファイルの名前を変更して、PDF拡張子を含める

解決策2：出力MAFF（すべてが保持され、異なるファイル形式）

MAFFを使用 （Mozilla Archive Format）

この拡張機能は、Webページをコンピューターに保存する方法を強化します。

組み込みの保存システムに比べて、次の利点があります。

  • 完全なページを単一のファイルとして保存できます（Webアーカイブ）
  • ページのタイトルを使用してファイルに名前を付けることができます（タイトル保存）
  • 保存されたページは元のページに忠実です（正確な保存）

Internet Explorerとの優れた互換性を備えたMHT（MHTML）ファイルを表示および保存できます。ただし、さらに重要なのは、次の利点があるMAFFファイル形式を使用できることです。

  • MAFFファイルは圧縮されているため、ディスク容量を節約できます
  • ページに埋め込まれたビデオとオーディオを含める
  • MAFFはZipに基づいており、Linuxやその他のプラットフォームと互換性があるため、普遍的である
  • ベンダーロックインのリスクのないオープンフォーマットを使用する
4
bhathiya-perera