web-dev-qa-db-ja.com

印刷ダイアログが閉じた後、自動的にウィンドウを閉じる

ユーザーがボタンをクリックするとタブが開きます。 onloadで、印刷ダイアログが表示されますが、ユーザーは、プリンターに送信して印刷した後、タブが閉じられるかどうかを尋ねました。これができるかどうかはわかりません。 setTimeout();を使用してみましたが、ユーザーが気を散らしてタブを再度開く必要があるため、定義された期間ではありません。これを達成する方法はありますか?

69
Tsundoku

print()呼び出しの直後にウィンドウを閉じようとすると、すぐにウィンドウが閉じて、print()が機能しません。これはあなたがすべきではないことです:

window.open();
...
window.print();
window.close();

このソリューションはFirefoxで動作します。print()呼び出しで、印刷が完了するまで待機してから、javascriptの処理を継続し、ウィンドウを閉じるためです。 IEは、print()呼び出しが完了するのを待たずにclose()関数を呼び出すため、これで失敗します。ポップアップウィンドウは、印刷が完了する前に閉じられます。

これを解決する1つの方法は、「onafterprint」イベントを使用することですが、これらのイベントはIEでのみ機能するため、お勧めしません。

最良の方法は、印刷ダイアログが閉じられたら(印刷が完了またはキャンセルされたら)ポップアップウィンドウを閉じることです。この時点で、ポップアップウィンドウがフォーカスされ、ポップアップを閉じるために「onfocus」イベントを使用できます。

これを行うには、次のjavascript埋め込みコードをポップアップウィンドウに挿入します。

<script type="text/javascript">
window.print();
window.onfocus=function(){ window.close();}
</script>

このheplsを望みます;-)

更新:

新しいchromeブラウザの場合、まだすぐに閉じることがあります こちらを参照 。この変更を実装し、現在のすべてのブラウザーで機能します:2/29/16

        setTimeout(function () { window.print(); }, 500);
        window.onfocus = function () { setTimeout(function () { window.close(); }, 500); }
103
serfer2

これが私が思いついたものであり、閉じる前にわずかな遅延がある理由がわかりません。

 window.print();
 setTimeout(window.close, 0);
71
noamtcohen

ただ:

window.print();
window.close();

できます。

14
Ying Style

私がやったことと私のために働いたことを書きたいだけです(私が試した他の何も働いていなかったので)。

印刷ダイアログが表示される前にIEがウィンドウを閉じるという問題がありました。

たくさんの試行錯誤とテストの後、これは私が働くようになったものです:

var w = window.open();
w.document.write($('#data').html()); //only part of the page to print, using jquery
w.document.close(); //this seems to be the thing doing the trick
w.focus();
w.print();
w.close();

これはすべてのブラウザで機能するようです。

12
Holger

このコードは私にとって完璧に機能しました:

<body onload="window.print()" onfocus="window.close()">

ページが開くと、印刷ダイアログが自動的に開き、印刷またはキャンセル後にウィンドウが閉じます。

それが役に立てば幸い、

10
Victor Olaru

Chromeを使用して、しばらくの間、window.onfocus=function() { window.close(); }<body ... onfocus="window.close()">を機能させようとしました。私の結果:

  1. 印刷ダイアログを閉じたが、何も起こらなかった。
  2. ブラウザのウィンドウ/タブを変更しましたが、まだ何も変更していません。
  3. 最初のウィンドウ/タブに戻り、window.onfocusイベントが発生してウィンドウが閉じました。

また、<body onload="window.print(); window.close()" >を試しましたが、印刷ダイアログで何かをクリックする前にウィンドウが閉じてしまいました。

どちらも使えませんでした。そこで、私は小さなJqueryを使用してドキュメントのステータスを監視しましたが、このコードは私にとってはうまくいきます。

<script type="text/javascript">
    var document_focus = false; // var we use to monitor document focused status.
    // Now our event handlers.
    $(document).focus(function() { document_focus = true; });
    $(document).ready(function() { window.print(); });
    setInterval(function() { if (document_focus === true) { window.close(); }  }, 500);
</script>

Jqueryが含まれていることを確認してから、これをコピーして、印刷するhtmlに貼り付けます。ユーザーが印刷した場合、PDFとして保存した場合、または印刷ジョブをキャンセルした場合、ウィンドウ/タブは自動的に破壊されます。注:これはChromeでのみテストしました。

編集

Jypsyがコメントで指摘したように、ドキュメントのフォーカスステータスは必要ありません。 noamtcohenからの回答を使用するだけで、コードをそのように変更し、機能します。

7
Nado11

これは、Chrome、Firefox、Operaで2016/05までにテスト済みのクロスブラウザソリューションです。

Microsoft Edgeにはバグがあり、印刷がキャンセルされてもウィンドウが閉じないことに注意してください。 関連リンク

var url = 'http://...';
var printWindow = window.open(url, '_blank');
printWindow.onload = function() {
    var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
    if (isIE) {

        printWindow.print();
        setTimeout(function () { printWindow.close(); }, 100);

    } else {

        setTimeout(function () {
            printWindow.print();
            var ival = setInterval(function() {
                printWindow.close();
                clearInterval(ival);
            }, 200);
        }, 500);
    }
}
7
Heroselohim

次は私のために働いた:

function print_link(link) {
    var mywindow = window.open(link, 'title', 'height=500,width=500');   
    mywindow.onload = function() { mywindow.print(); mywindow.close(); }
}
5
Abu shoaib

これはChrome 59でうまく機能します:

window.print();
window.onmousemove = function() {
  window.close();
}
3
maxhud

次のソリューションは、2014-03-10の時点でIE9、IE8、Chrome、およびFFの新しいバージョンで機能しています。シナリオは次のとおりです。ウィンドウ(A)で、ボタン/リンクをクリックして印刷プロセスを開始し、印刷する内容を含む新しいウィンドウ(B)を開くと、印刷ダイアログがすぐに表示されます。キャンセルまたは印刷することができ、新しいウィンドウ(B)が自動的に閉じます。

次のコードはこれを許可します。このjavascriptコードは、ウィンドウAのhtmlに配置されます(ウィンドウBではありません)。

/**
 * Opens a new window for the given URL, to print its contents. Then closes the window.
 */
function openPrintWindow(url, name, specs) {
  var printWindow = window.open(url, name, specs);
    var printAndClose = function() {
        if (printWindow.document.readyState == 'complete') {
            clearInterval(sched);
            printWindow.print();
            printWindow.close();
        }
    }
    var sched = setInterval(printAndClose, 200);
};

プロセスを起動するボタン/リンクは、次のようにこの関数を呼び出すだけです。

openPrintWindow('http://www.google.com', 'windowTitle', 'width=820,height=600');
3

これは私のために働く:

<script>window.onload= function () { window.print();window.close();   }  </script>
3
arun.m

確かにこれは以下を行うことで簡単に解決できます:

  <script type="text/javascript">
     window.print();
     window.onafterprint = window.close;
  </script>
2
Samuel Bié

これは、<body onload="window.print()"...などのポップアップにHTMLを挿入するのに最適でした。上記はIE、Chrome、FF(Mac)では機能しますが、WindowsではFFには機能しません。

https://stackoverflow.com/a/11782214/1322092

var html = '<html><head><title></title>'+
               '<link rel="stylesheet" href="css/mycss.css" type="text/css" />'+
               '</head><body onload="window.focus(); window.print(); window.close()">'+
               data+
               '</body></html>';
1
user1322092

ここに私がやることがあります....

クエリパラメータに基づいてウィンドウを印刷して閉じられるようにします。

JQueryが必要です。すべてのページで動作するように、_Layoutまたはマスターページで実行できます。

アイデアは、ページを印刷して閉じるように指示するURLでパラメーターを渡すことです。パラメーターが設定されている場合、jQueryの「準備完了」イベントはウィンドウを印刷し、ページが完全にロードされると(印刷後)「onload」が呼び出され、ウィンドウが閉じます。この一見余分な手順はすべて、ウィンドウが印刷されるのを待ってから閉じることです。

Htmlボディで、printAndCloseOnLoad()を呼び出すイベントを追加およびロードします。この例では、cshtmを使用していますが、javascriptを使用してparamを取得することもできます。

<body onload="sccPrintAndCloseOnLoad('@Request.QueryString["PrintAndClose"]');">

JavaScriptで関数を追加します。

function printAndCloseOnLoad(printAndClose) {
    if (printAndClose) {
        // close self without prompting
        window.open('', '_self', ''); window.close();
    }
}

そしてjQuery readyイベント。

$(document).ready(function () {
    if (window.location.search.indexOf("PrintAndClose=") > 0)
        print();
});

これで、URLを開くときに、クエリ文字列パラメーター「PrintAndClose = true」を追加するだけで、印刷して閉じます。

1
RitchieD
<!doctype html>
<html>
<script>
 window.print();
 </script>
<?php   
date_default_timezone_set('Asia/Kolkata');
include 'db.php'; 
$tot=0; 
$id=$_GET['id'];
    $sqlinv="SELECT * FROM `sellform` WHERE `id`='$id' ";
    $resinv=mysqli_query($conn,$sqlinv);
    $rowinv=mysqli_fetch_array($resinv);
?>
        <table width="100%">
           <tr>
                <td style='text-align:center;font-sie:1px'>Veg/NonVeg</td>  
            </tr>
            <tr>
                <th style='text-align:center;font-sie:4px'><b>HARYALI<b></th>  
            </tr>   
            <tr>
                <td style='text-align:center;font-sie:1px'>Ac/NonAC</td>  
            </tr>
            <tr>
                <td style='text-align:center;font-sie:1px'>B S Yedurappa Marg,Near Junne Belgaon Naka,P B Road,Belgaum - 590003</td>  
            </tr>
        </table>
        <br>    
        <table width="100%">
           <tr>
                <td style='text-align:center;font-sie:1'>-----------------------------------------------</td>  
            </tr>
        </table>

        <table  width="100%" cellspacing='6' cellpadding='0'>

            <tr>
                <th style='text-align:center;font-sie:1px'>ITEM</th>
                <th style='text-align:center;font-sie:1px'>QTY</th>
                <th style='text-align:center;font-sie:1px'>RATE</th>
                <th style='text-align:center;font-sie:1px'>PRICE</th>
                <th style='text-align:center;font-sie:1px' >TOTAL</th>
            </tr>

            <?php
            $sqlitems="SELECT * FROM `sellitems` WHERE `invoice`='$rowinv[0]'";
            $resitems=mysqli_query($conn,$sqlitems);
            while($rowitems=mysqli_fetch_array($resitems)){
            $sqlitems1="SELECT iname FROM `itemmaster` where icode='$rowitems[2]'";
            $resitems1=mysqli_query($conn,$sqlitems1);
            $rowitems1=mysqli_fetch_array($resitems1);
            echo "<tr>
                <td style='text-align:center;font-sie:3px'  >$rowitems1[0]</td>
                <td style='text-align:center;font-sie:3px' >$rowitems[5]</td>
                <td style='text-align:center;font-sie:3px' >".number_format($rowitems[4],2)."</td>
                <td style='text-align:center;font-sie:3px' >".number_format($rowitems[6],2)."</td>
                <td style='text-align:center;font-sie:3px' >".number_format($rowitems[7],2)."</td>
              </tr>";
                $tot=$tot+$rowitems[7];
            }

            echo "<tr>
                <th style='text-align:right;font-sie:1px' colspan='4'>GRAND TOTAL</th>
                <th style='text-align:center;font-sie:1px' >".number_format($tot,2)."</th>
                </tr>";
            ?>
        </table>
     <table width="100%">
           <tr>
                <td style='text-align:center;font-sie:1px'>-----------------------------------------------</td>  
            </tr>
        </table>
        <br>
        <table width="100%">
            <tr>
                <th style='text-align:center;font-sie:1px'>Thank you Visit Again</th>  
            </tr>
        </table>
<script>
window.close();
</script>
</html>

ボタンを1回クリックするだけで、PHPとJavaScriptを使用して新しいタブウィンドウを印刷して閉じます

1

これが私にとってうまくいったことです(2018/02)。印刷物がまだ画面に表示されないため、別のリクエストが必要でした。上記の優れた回答のいくつかに基づいて、ありがとうございました。

  • w.onloadw.document.write(data)の前にnotに設定する必要があります。
    フックを事前に設定する必要があるため、奇妙に思えます。私の推測:フックは、コンテンツなしでウィンドウを開くときにすでに起動されています。発射されるので、再び発射することはありません。ただし、新しいdocument.write()で進行中の処理がまだある場合、処理が終了するとフックが呼び出されます。
  • w.document.close()はまだ必要です。それ以外の場合は何も起こりません。

これをChrome 64.0、IE11(11.248)、Edge 41.16299(edgeHTML 16.16299)、FF 58.0.1でテストしました。ポップアップについて不平を言うでしょうが、印刷されます。

function on_request_print() {
  $.get('/some/page.html')
    .done(function(data) {
      console.log('data ready ' + data.length);
      var w = window.open();
      w.document.write(data);
      w.onload = function() {
        console.log('on.load fired')
        w.focus();
        w.print();
        w.close();
      }
      console.log('written data')
      //this seems to be the thing doing the trick
      w.document.close();
      console.log('document closed')
    })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<a onclick="on_request_print();">Print rapportage</a>
1
Remco
const printHtml = async (html) => {
    const printable = window.open('', '_blank', 'fullscreen=no');
    printable.document.open();
    printable.document.write(`<html><body onload="window.print()">${html}</body></html>`);
    await printable.print();
    printable.close();
};

ここに私のES2016ソリューションがあります。

1
Stuart

私にとっての最終的な解決策は、いくつかの答えを組み合わせたものでした。

    var newWindow = window.open();
    newWindow.document.open();
    newWindow.document.write('<html><link rel="stylesheet" href="css/normalize-3.0.2.css" type="text/css" />'
            + '<link rel="stylesheet" href="css/default.css" type="text/css" />'
            + '<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />');

    newWindow.document.write('<body onload="window.print();" onfocus="window.setTimeout(function() { window.close(); }, 100);">');
    newWindow.document.write(document.getElementById(<ID>).innerHTML);
    newWindow.document.write('</body></html>');
    newWindow.document.close();
    newWindow.focus();
0
Felipe

これはChromeで機能します(他のユーザーでは試していません)

$(function(){
    window.print();
    $("body").hover(function(){
        window.close();
    });
});
0
emmmm

これを試して:

var xxx = window.open("","Printing...");
xxx.onload = function () {
     setTimeout(function(){xxx.print();}, 500);
     xxx.onfocus = function () {
        xxx.close();
     }  
}
0
Sugeng Novianto

このようなものをブラウザ間で動作させるのは大変です。

もともと同じようなことをしようとしていました-印刷用にスタイル設定された新しいページを開き、JSを使用して印刷し、再度閉じます。これは悪夢でした。

最後に、印刷可能なページにクリックスルーし、以下のJSを使用して印刷を開始し、完了したら目的の場所にリダイレクトします(PHPに変数を設定します)この場合には)。

OSXおよびWindows上のChromeとFirefox、およびIE11-8でこれをテストし、すべてで動作します(実際にプリンターをインストールしていない場合、IE8は少しフリーズします)。

ハッピーハンティング(印刷)。

<script type="text/javascript">

   window.print(); //this triggers the print

   setTimeout("closePrintView()", 3000); //delay required for IE to realise what's going on

   window.onafterprint = closePrintView(); //this is the thing that makes it work i

   function closePrintView() { //this function simply runs something you want it to do

      document.location.href = "'.$referralurl.'"; //in this instance, I'm doing a re-direct

   }

</script>
0
boboshady

これはFF 36、Chrome 41およびIE 11.で機能しました。印刷をキャンセルしても、右上の[X]で印刷ダイアログを閉じても。

var newWindow=window.open(); 
newWindow.document.open();
newWindow.document.write('<HTML><BODY>Hi!</BODY></HTML>'); //add your content
newWindow.document.close();
newWindow.print();      

newWindow.onload = function(e){ newWindow.close(); }; //works in IE & FF but not chrome 

//adding script to new document below makes it work in chrome 
//but alone it sometimes failed in FF
//using both methods together works in all 3 browsers
var script   = newWindow.document.createElement("script");
script.type  = "text/javascript";
script.text  = "window.close();";
newWindow.document.body.appendChild(script);
0
James Bell

これは私にとって完璧に機能しますが、@ holger、私はそれを修正し、私に合っています.

function printcontent()
{ 
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
disp_setting+="scrollbars=yes,width=300, height=350, left=50, top=25"; 
var content_vlue = document.getElementById("content").innerHTML; 
var w = window.open("","", disp_setting);
w.document.write(content_vlue); //only part of the page to print, using jquery
w.document.close(); //this seems to be the thing doing the trick
w.focus();
w.print();
w.close();
}"
0

IEはonbeforeprintイベントとonafterprintイベントを持っています(持っていますか?):それを待つことはできますが、IE(これは大丈夫かもしれませんが)でしか動作しません。

または、フォーカスが印刷ダイアログからウィンドウに戻って閉じるまで待つこともできます。 Amazon Web Servicesは、請求書の印刷ダイアログでこれを行います。印刷ボタンを押すと、印刷に適したビューが開き、すぐにプリンターダイアログが開きます。印刷を押すかキャンセルすると、印刷ダイアログが閉じ、印刷に適したビューがすぐに閉じます。

0
Femi

IE11では、onfocusイベントが2回呼び出されるため、ユーザーはウィンドウを閉じるように2回求められます。これはわずかな変更によって防ぐことができます:

<script type="text/javascript">
  var isClosed = false;
  window.print();
  window.onfocus = function() {
    if(isClosed) { // Work around IE11 calling window.close twice
      return;
    }
    window.close();
    isClosed = true;
  }
</script>
0

私はこれを試してみましたが、うまくいきます

var popupWin = window.open('', 'PrintWindow', 
'width=650,height=650,location=no,left=200px');
popupWin.document.write(data[0].xmldata);
popupWin.print();
popupWin.close();
0
user13548

単純な追加:

<html>
<body onload="print(); close();">
</body>
</html>
0

このJavaスクリプトを使用するだけです

 function PrintDiv() {
    var divContents = document.getElementById("ReportDiv").innerHTML;
    var printWindow = window.open('', '', 'height=200,width=400');
    printWindow.document.write('</head><body >');
    printWindow.document.write(divContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
    printWindow.close();
}

送信後にボタンを閉じるか、ボタンのクリックをキャンセルします

0
user3373573
setTimeout(function () { window.print(); }, 500);
        window.onfocus = function () { setTimeout(function () { window.close(); }, 500); }

それは私にとって完璧な仕事です。それが役に立てば幸い

0
Klajdi Dosti

最善の方法は 待つ ドキュメント(別名DOM)が適切に読み込まれ、印刷機能と終了機能が使用されるようにします。 Document Ready関数(jQuery)でラップしています:

<script>
$(document).ready(function () {
window.print();
window.close();
});
</script>

注目に値するのは、上記が私の「印刷可能なページ」に置かれていることです(あなたはそれを呼び出すことができます 「printable.html」 別のページからリンクすること(それを呼び出す linkpage.html お望みならば):

<script>
function openNewPrintWindow(){
var newWindow=window.open('http://printable.html'); //replace with your url
newWindow.focus(); //Sets focus window
}
</script>

そして、解決策を探しているコピーアンドペースト開発者向けに、上記の機能への「トリガー」があります(同じページ)。

<button onclick="openNewPrintWindow()">Print</button>

だからそれは

  1. [印刷]をクリックすると新しいウィンドウが開きます
  2. ページの読み込み後に(ブラウザ)印刷ダイアログをトリガーします
  3. 印刷(またはキャンセル)後、ウィンドウを閉じます。

あなたが楽しんでいることを願っています!

0
Rbbn