web-dev-qa-db-ja.com

JavaScript印刷プレビュー

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

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

印刷物では「このページを印刷する」も印刷されています。どうすれば非表示にできますか？

javascripthtmlcssprinting
13
rajanikant

個別の 印刷スタイルシート を作成して、サイトが印刷でどのように表示されるかを一般的に制御できます。印刷する前に、この特別な印刷スタイルシートを使用してサイトをユーザーに表示できます。ただし、ブラウザごとに処理が少し異なるため、100％のプレビューは得られません。実際に印刷されるまで、どのように印刷されるかはわかりません。ただし、印刷スタイルシートを使用すると、かなり近づきます。

一部のオペレーティングシステムとプリンタードライバーは、[印刷]ボタンを押してから実際に印刷するまでの間にユーザーにプレビューを提供しますが、それはユーザーが制御できるものではなく、常に利用できることが保証されています。

7
deceze

ブラウザは、ブラウザの印刷プレビュー機能をトリガーするAPIを提供していません。

幸いなことに、ほとんどすべてが通常の場所（[ファイル]メニューからぶら下がっている）に保持されているため、ユーザーの注意を引く必要はありません。

6
Quentin

驚いたことに、まだ誰も対処していません

Webサイトから生成された請求書の印刷プレビューを確認するにはどうすればよいですか

質問。私はちょうど同様の機能が必要で、 Firebugで印刷メディアCSSを表示する方法は？ で解決策を思いつきました。

1
Alberto

Window.print（）を呼び出すことにより、現在のページを印刷することができます。例えば：

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

印刷されたように見えることを彼らに伝えたい場合は、 このページ のスクリプトを使用して、ページが印刷される方法の疑似プレビューを提供できます。

1
garethm

これは私が使用したものです：

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';
    })
}
0
Helzgate

印刷で表示したくない要素は、を使用して非表示にする必要があります。

display:none

あなたのウェブページを印刷する についてのチュートリアルを書きました。お役に立てば幸いです。

0
Nidis

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

0
Cerebrus

印刷時にリンクを非表示にするには、次のようにします。

<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>

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

0
Eric