web-dev-qa-db-ja.com

JavaScriptを使用して画像を印刷する

Javascriptを使用して画像を含むポップアップウィンドウを開くことができ、同時に印刷ダイアログを表示できるかどうかを知りたいです。誰かが印刷をクリックすると、ポップアップが閉じます。

これは簡単に達成できますか？

javascriptimagepopupprinting
17
andrew
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
23
Javier Parra

別の素晴らしいソリューション!!すべてのクレジットはCodescratcherに送られます

<script>

    function ImagetoPrint(source)
    {
        return "<html><head><scri"+"pt>function step1(){\n" +
                "setTimeout('step2()', 10);}\n" +
                "function step2(){window.print();window.close()}\n" +
                "</scri" + "pt></head><body onload='step1()'>\n" +
                "<img src='" + source + "' /></body></html>";
    }

    function PrintImage(source)
    {
        var Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImagetoPrint(source));
        pwa.document.close();
    }

</script>

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

完全な例 ここ を参照してください。

21
ricardo_escovar

これをヘッドブロックで使用します

<script type="text/javascript">
function printImg() {
  pwin = window.open(document.getElementById("mainImg").src,"_blank");
  pwin.onload = function () {window.print();}
}
</script>

これをボディブロックで使用します

<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image"  onclick="printImg()" />
8
Zahid Habib

このコードは、ポップアップウィンドウでYOUR_IMAGE_URLを開き、印刷ダイアログを表示し、印刷後にポップアップウィンドウを閉じます。

var popup;

function closePrint () {
    if ( popup ) {
        popup.close();
    }
}

popup = window.open( YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE
popup.print();

MDN参照コード

5
Igor Jerosimić

クロスブラウザソリューションprintImage(document.getElementById('buzzBarcode').src)

/**
 * Prints an image by temporarily opening a popup
 * @param {string} src - image source to load
 * @returns {void}
 */
function printImage(src) {
    var win = window.open('about:blank', "_new");
    win.document.open();
    win.document.write([
        '<html>',
        '   <head>',
        '   </head>',
        '   <body onload="window.print()" onafterprint="window.close()">',
        '       <img src="' + src + '"/>',
        '   </body>',
        '</html>'
    ].join(''));
    win.document.close();
}
img {
  display: block;
  margin: 10px auto;
}

button {
  font-family: tahoma;
  font-size: 12px;
  padding: 6px;
  display: block;
  margin: 0 auto;
}
<img id="buzzBarcode" src="https://barcode.orcascan.com/qrcode/buzz.png?text=to infinity and beyond" width="150" height="150" />
2
user12133161

ええ、画像を画面に表示し、JavaScriptでwindow.print();を呼び出すだけでポップアップします。

（これがGoogleマップ/ Googleカレンダーの印刷方法です）

1
Mitch Dempsey

これを行うコーヒースクリプト関数を作成しました（ただし、新しいウィンドウを開くことはありません）。

@print_img = (url) ->
$children = $('body').children().hide()
$img = $('<img>', src: url)
$img.appendTo('body')

$img.on 'load', ->
  window.print()
  $(this).remove()
  $children.show()

または、JavaScriptで希望する場合：

this.print_img = function(url) {
  var $children, $img;
  $children = $('body').children().hide();
  $img = $('<img>', {
    src: url
  });
  $img.appendTo('body');

  $img.on('load', function() {
    window.print();
    $(this).remove();
    $children.show();
  });
};

この関数により、本体の要素が非表示になり、DOMに再描画されなくなります。また、印刷を呼び出す前に画像が読み込まれるようにします（画像が大きすぎてインターネット接続が遅い場合は、imgの読み込みに時間がかかることがあります。印刷をすぐに呼び出すと、空のページが印刷されます）

0
Gorodscy Fernando

私はこの「単純な」問題に45分間費やして、操作したい方法で問題を解決しようとしました。

Imgタグ内に画像があり、印刷する必要がある_jQuery Barcode_プラグインによって動的に生成されました。別のウィンドウで印刷してからウィンドウを閉じたいと思っていました。これはすべて、ユーザーが_jQuery Grid_プラグイン内、_jQuery-UI_ダイアログ内のボタン、およびそれに適用された_jQuery-UI_ダイアログエクステンダーをクリックした後に発生するはずでした。

私が最終的にこれを思いつくまで、私はみんなの答えを調整しました、多分それは誰かを助けることができます。

_w = window.open(document.getElementById("UB-canvas").src);
w.onload = function () { w.print(); }
w.onbeforeunload = setTimeout(function () { w.close(); },500);
w.onafterprint = setTimeout(function () { w.close(); },500);
_

setTimeoutは単なるたわごとではなく、_Firefox 42_がこれらの関数にヒットする唯一の方法です。ブレークポイントを追加するまで.close()関数をスキップするだけで、完全に機能しました。したがって、onbeforeloadイベント関数とonafterprintイベント関数などを適用する前に、これらのウィンドウインスタンスを作成したと想定しています。

0
Kickass

これはChromeで機能します。

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 1);
                };
            </script>
    </body>
0
DD.