JavaScript印刷プレビュー

Question

ウェブサイトから生成した請求書の印刷プレビューを確認するにはどうすればよいですか？スクリプトで印刷した場合

<a href="javascript:window.print()">print this page</a> 

"print this page"も印刷されています。どうすればそれを隠すことができますか？

Answer 1

window.print（）を呼び出すと、現在のページを印刷できます。たとえば、次のように

<a href="JavaScript:window.print();">Print this page</a> 

あなたがそれらを印刷し、あなたがそれらを印刷して道ページのpseduo-プレビューを与えることthis pageでスクリプトを使用することができますようにそれが見えるだろう何のいくつかのアイデアを与えることを望んでいる場合。

Answer 2

ブラウザでは、ブラウザで印刷プレビュー機能を起動するAPIは提供されていません。

幸いにも、彼らはほとんどすべての場所（ファイルメニューからぶら下がっている）に置いておくので、ユーザーの注意を引く必要はありません。

Answer 3

別のprint stylesheetsを作成して、サイトの印刷方法を一般的に制御することができます。印刷する前にこの特別な印刷スタイルシートを使用して、サイトをユーザーに表示することができます。それはあなたに100％のプレビューを与えるわけではありません。すべてのブラウザが少し違ったやり方で処理します。実際に印刷されるまでは、どのように印刷されるかわかりません。印刷スタイルシートを使用すると、かなり近づくでしょう。

オペレーティングシステムやプリンタドライバの中には、[印刷]ボタンと実際の印刷物の間でユーザーにプレビューを提供するものがありますが、これは管理しているものではなく、常に利用可能であることが保証されています。

Answer 4

質問に直接答えるには、ブラウザのprint（）メソッドを呼び出すと、そのページがそのまま印刷されます。別のバージョンのページ（「このページを印刷する」要素を除く）を印刷する場合は、別の印刷可能バージョンのページを作成する必要があります（通常は別のスタイルシートを使用して作成されます）。あなたは印刷されたページに必要ではない要素。

Answer 5

あなたの質問の以下の部分をアドレス指定：。？印刷「印刷で

このページをも 印刷され、私はそれを隠すことができますどのように

（新しいスタイルシートを作成します。この例では、「print.css」という名前を付けて、HTMLに次のように含めます）。

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> 

media="print"に注意してください。これは、スタイルシートがページの印刷時にのみ使用されることを意味します。 「今

.noPrint { 
    display: none; 
} 

：

<a href="javascript:window.print()" class="noPrint">Print this Page</a> 

最後に、あなたのCSSファイルで、次のルールが含まれています。我々はCSSでそれを参照できるように

次あなた<a>要素にクラスを割り当てますあなたのページの印刷版にはこのページを印刷するリンクは表示されません。

スティーブは

Answer 6

印刷するリンクを非表示にするには、次の操作を行います。また

<style type="text/css" media="print"> 
.printlink 
{ 
    display:none; 
} 
</style> 
<a href="javascript:windows.print()" class="printlink">print this page</a> 

：

<a href="javascript:windows.print()" 
onclick="this.style.display='none';" 
class="printlink"> 
print this page 
</a> 

を、これは、印刷をキャンセルした後再表示されませんが。 HTML本体内

Answer 7

function Print() 
{  
    document.getElementById('ImagePrint').style.visibility='hidden';  
    window.print(); 
    document.getElementById('ImagePrint').style.visibility='visible';   
} 

<div> 
    <a id="ImagePrint" onclick="return PrintReport();" style="vertical-align: top">print Info</a> 
</div> 

この機能は、印刷中にウル画像が表示されません。あなたはコントロールIDを持つ画像ではなく、あなたのコントロールを使用することができます。 は、uはあなたが私がprinting your webpageについてのチュートリアルを書きました

display:none 

を使用して、印刷に表示されないようにする要素を非表示にするウルソリューション

Answer 8

を得ることを願っています。私はそれが助けて欲しい

Answer 9

は驚いたことに、誰がどのように私はウェブサイト

質問から生成された私の請求書の印刷プレビューを見ることができます

をまだ対処していません。私はちょうど同じような機能を必要とし、これは私が使用したものであるHow to see the print media CSS in Firebug?

Answer 10

に解決策を考え出したしました：

printPage(evt: any) { 
    // add this 'noprint' class to elements you want to hide from printing 
    let hideElements = document.getElementsByClassName('noprint'); 
    let arr = Array.prototype.slice.call(hideElements) 
    arr.map(val => { 
     val.style.visibility = 'hidden'; 
    }) 
    let w = window.open(); 
    // 'main' is the section I want to print 
    w.document.write(document.getElementById('main').innerHTML); 
    w.print(); 
    w.close(); 
    arr.map(val => { 
     val.style.visibility = 'visible'; 
    }) 
}