18

divコンテンツを印刷したいウェブサイトがあります。問題は、div がスクロール可能で、すべてのコンテンツを印刷できないことです。印刷したいものを除くすべての divを試しdisplay:noneてから、Google Chrome の Awesome Screenshot 拡張機能を使用しましたが、その div だけをスクロールすることはできません。

HTML で Javascript を使用することについて読んだことがあると思いますが、そのコードの使用方法がわかりません。それは私のウェブサイトではないので、そのコードを挿入してコンテンツを印刷するにはどうすればよいですか?

4

5 に答える 5

29

使用している Web サイトはわかりませんが、IE では F12 開発者ツールを開き、表示する div を見つけて、その場でスタイルを変更できます。

{
display: block;
width: auto;
height: auto;
overflow: visible;
}

その後、スクロールバーなしで div にすべてのコンテンツが表示されます...これが役立つことを願っています!

于 2013-05-31T02:04:29.113 に答える
12

ページを見たり、そのレイアウトを知らなかったりしないと、見栄えが悪くならないように何を提案すればよいかを判断するのは困難です。

ただし、他のすべてのコンテンツを非表示にする場合 (印刷スタイルシートであると思います) が機能する場合は、次を追加できます。

@media only print {
   #idOfYourDiv {
     width: auto;
     height: auto;
     overflow: visible;
   }
}

すべてのコンテンツを一度に表示します。

于 2013-05-31T02:03:58.867 に答える
3

この JS 関数を使用します:
印刷可能な DIV はdiv1です

function printpage(){
    var originalContents = document.body.innerHTML;
    var printReport= document.getElementById('div1').innerHTML;
    document.body.innerHTML = printReport;
    window.print();
    document.body.innerHTML = originalContents;
}
于 2015-05-06T13:09:19.200 に答える
1

私の答えは、@ Porschieyと @ Paul Roubによって与えられたものに少し追加したものに基づいています。

彼らの与えられた解決策は、私<div>が印刷したいCSSがposition: fixed. <div>結果の印刷では、これには通常、読み込まれたページの実際のサイズに収まるコンテンツのみが含まれます。
そのため、CSS の position 属性を次のように変更してrelative、すべてを印刷できるようにする必要もありました。だから、私のために働いた結果のCSSはこれです:-

{
    display: block; /* Not really needed in all cases */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}
于 2019-07-05T06:24:31.167 に答える