web-dev-qa-db-ja.com

Google Chrome印刷プレビューに画像が表示されない

ポップアップを作成してHTMLを作成して印刷するコードがあります。 Google Chromeは印刷プレビューに画像を表示していませんが、他のブラウザは正常に動作しています。ファイルLogo_big.pngが欠落しています。 Chromeでも動作させるにはどうすればよいですか？

私のコード：

var newWindow = window.open('', '', 'width=100, height=100'),
        document = newWindow.document.open(),
        pageContent =
            '<!DOCTYPE html>' +
            '<html>' +
            '<head>' +
            '<meta charset="utf-8" />' +
            '<title>Inventory</title>' +
            '<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; }</style>' +
            '</head>' +
            '<body><div><div style="width:33.33%; float:left;"><img src="img/Logo_big.png"/></body></html>';
        document.write(pageContent);
        document.close();
        newWindow.moveTo(0, 0);
        newWindow.resizeTo(screen.width, screen.height);
        newWindow.print();
        newWindow.close();
javascriptgoogle-chromeprintingpopup
15
user3573766

ここでの問題は、JavaScriptがDOMにsrcを設定した後、画像をロード/レンダリングするのに十分な（任意の）時間を与えないことです。

ブラウザが画像を（キャッシュなどから）ロード/レンダリングする時間を確保する必要があります。これを行うには、setTimeoutを設定して、設定されているコンテンツからの印刷を遅らせます。

この特定の質問の例は次のとおりです。

var newWindow = window.open('', '', 'width=100, height=100'),
document = newWindow.document.open(),
pageContent =
    '<!DOCTYPE html>' +
    '<html>' +
    '<head>' +
    '<meta charset="utf-8" />' +
    '<title>Inventory</title>' +
    '<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; }</style>' +
    '</head>' +
    '<body><div><div style="width:33.33%; float:left;"><img src="img/Logo_big.png"/></body></html>';
document.write(pageContent);
document.close();
newWindow.moveTo(0, 0);
newWindow.resizeTo(screen.width, screen.height);
setTimeout(function() {
    newWindow.print();
    newWindow.close();
}, 250);

setTimeoutを低く設定すると、ブラウザーが画像をロードする時間が短くなるため、これを調整して、該当する場合は低速のインターネット接続/ブラウザーに対応する必要があります。

24
William Isted

綿密な調査の後、Googleで画像と背景を表示するための解決策を見つけましたchrome印刷プレビュー：

function PopUp(data) {
    var mywindow = window.open('','','left=0,top=0,width=950,height=600,toolbar=0,scrollbars=0,status=0,addressbar=0');

    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);
    mywindow.document.close(); // necessary for IE >= 10 and necessary before onload for chrome

    if (is_chrome) {
        mywindow.onload = function() { // wait until all resources loaded 
            mywindow.focus(); // necessary for IE >= 10
            mywindow.print();  // change window to mywindow
            mywindow.close();// change window to mywindow
        };
    }
    else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print();
        mywindow.close();
    }

    return true;
}

コードの一部を支援してくれたAnand Deep Singhの投稿に感謝します。

10
Jesus Flores

メディア印刷用のcssに以下を追加できます。

img {
    -webkit-print-color-adjust: exact;
}
8
Kostas Karkaletsis

印刷する前に遅延を入れる必要があります。 Chromeにはネイティブのバグがあります。コードは以下のようになります：-

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

    if (is_chrome) {
        setTimeout(function () { // wait until all resources loaded 
                mywindow.document.close(); // necessary for IE >= 10
                mywindow.focus(); // necessary for IE >= 10
                mywindow.print();  // change window to winPrint
                mywindow.close();// change window to winPrint
        }, 250);
    }
    else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
    }

    return true;
}
4
Anand Deep Singh

JQueryを使用している場合は、「on load」イベントを使用できます。これは、ページ全体（画像を含む）の準備ができるまで待機します。これは、多くの画像がある場合に役立ちます。 注：HTMLにjQueryソースを含める必要があります。

以下をHTMLに含めます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

あなたのjavaScriptは今でしょう。

var newWindow = window.open('', '', 'width=100, height=100'),
        document = newWindow.document.open(),
        pageContent =
            '<!DOCTYPE html>' +
            '<html>' +
            '<head>' +
            '<meta charset="utf-8" />' +
            '<title>Inventory</title>' +
            '<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; }</style>' +
            '</head>' +
            '<body><div><div style="width:33.33%; float:left;"><img src="img/Logo_big.png"/></body></html>';
        document.write(pageContent);
        document.close();
        newWindow.moveTo(0, 0);
        newWindow.resizeTo(screen.width, screen.height);
    $(newWindow.window).on("load", function () {
        newWindow.print();
        newWindow.close();
    });

お役に立てれば。

3
Hayden Passmore
var newWindow = window.open('', '', 'width=100, height=100'),
        pageContent =
        '<!DOCTYPE html>' +
        '<html>' +
        '<head>' +
        '<meta charset="utf-8" />' +
        '<title>Inventory</title>' +
        '<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; } img{display:visible}</style>' +
        '</head>' +
        '<body><img src="img/Logo_big.png"/></body></html>';
    newWindow.document.write(pageContent);
    document.close();
newWindow.moveTo(0, 0);
newWindow.resizeTo(screen.width, screen.height);
newWindow.print();
newWindow.close();

コードが正常に機能することを願っています
画像が表示されない場合は、絶対画像のURLを指定する必要があることにご注意ください：頑張ってください:)

1
user1592671

私は Jesus Flores で与えられた解を使用しました
[〜＃〜]しかし[〜＃〜]印刷をキャンセルして再度実行すると機能しません。したがって、私はsetTimeout（）関数を使用してその状況に取り組み、

function PopUp(data) {
    var mywindow = window.open('','','left=0,top=0,width=950,height=600,toolbar=0,scrollbars=0,status=0,addressbar=0');

    var is_chrome = Boolean(mywindow.chrome);
    var isPrinting = false;
    mywindow.document.write(data);
    mywindow.document.close(); // necessary for IE >= 10 and necessary before onload for chrome


    if (is_chrome) {
        mywindow.onload = function() { // wait until all resources loaded 
            isPrinting = true;
            mywindow.focus(); // necessary for IE >= 10
            mywindow.print();  // change window to mywindow
            mywindow.close();// change window to mywindow
            isPrinting = false;
        };
        setTimeout(function () { if(!isPrinting){mywindow.print();mywindow.close();} }, 300);
    }
    else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print();
        mywindow.close();
    }

    return true;
}

これはそのための最良の方法ではない可能性があるため、あらゆる種類の提案を歓迎します！

1
mohitSehgal

閉じられていない2つの開始 'div'タグがあるようです。

1
seemc0

あなたはおそらくこれに対する答えをすでに見つけたでしょうが、私は私の画像がprint（）メソッドに表示されず、ctrl + pを実行すると表示されるという同様の問題がありました。私の問題の解決策は、imgタグで幅パラメーターのみを指定したことでした。なんらかの理由で、Chromeのprint（）メソッドはこれを好まないため、imgタグにも高さパラメーターを追加し、画像を印刷することになりました。

コード内で、imgタグ内にどちらのパラメーターも指定されていないことに気付きました。私の推測では、これらのパラメーターを追加することで、画像が印刷されるはずです。

0
Michael