28

私が取り組んでいるプロジェクトのウェブサイトでこの機能を動作させようとしています。この関数の目的は、偶然にもセレクター #content と呼ばれる子 div の内容を (物理的に) 印刷することだけです。

ここに私が今まで持っていたちょっとしたものがあります：

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

この関数は、ユーザーが「印刷」ハイパーリンクをクリックすると起動されます。新しいウィンドウは、別の HTML ドキュメントから解析された #content div のコンテンツをロードします。

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

それと一緒にスタイリングをロードしません。すべてのコンテンツが左上隅にトリミングされます。JS を介して CSS をリンクするか、別のページで提案されているようにページの先頭に配置するだけで、CSS をリンクしようとしました。もちろん、私はこれを間違っている可能性があります。私はまだ JQuery でこれを理解しようとしていないので、私の問題を解決するのに役立つ可能性のある他の解決策があれば、喜んでアドバイスを受け取ります。

前もって感謝します！

4

7 に答える 7

38

開いたウィンドウで完全な HTML ページを作成し、そこで CSS ファイルを参照します。

var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
于 2013-09-12T07:43:48.780 に答える
9

親ページからすべてのスタイルを取得して印刷したかったのです。だから私はHEADのすべてのcss リンクを使いたかったのです。

私のソリューションではjQueryを使用しています。

(function print() {
    // getting the tag element I want to print
    // cloning the content so it doesn't get messed
    // remove all the possible scripts that could be embed
    var printContents = $('body').clone().find('script').remove().end().html();

    // get all <links> and remove all the <script>'s from the header that could run on the new window
    var allLinks = $('head').clone().find('script').remove().end().html();

    // open a new window
    var popupWin = window.open('', '_blank');
    // ready for writing
    popupWin.document.open();

    // -webkit-print-color-adjust to keep colors for the printing version
    var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';

    // writing
    // onload="window.print()" to print straigthaway
    popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');

    // close for writing
    popupWin.document.close();
})();
于 2016-05-19T12:40:44.860 に答える
5

ページのレンダリング後の CSS の読み込みにも問題があったため、解決策は css ファイルの内容を読み取って新しいドキュメントに書き込むことでした。

    var w = window.open();
    jQuery.get('/styles.css', function (data) {
        w.document.write('<html><head><style>');
        w.document.write(data);
        w.document.write('</style></head><body>');
        w.document.write($('.print-content').html());
        w.document.write('</body></html>');
        w.print();
        w.close();
    });
于 2016-02-22T12:33:15.047 に答える