打开一个新的JavaScript窗口(.open)及其CSS样式

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1359)

我试图让这个函数在我正在开发的项目的网站上工作。这个功能的目的是仅仅(物理地)打印一个被称为选择符#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,或者把它放在页面的头部,就像在另一个页面上建议的那样。当然,我可能会做这个错误。我还没有真正尝试过使用JQuery来解决这个问题,所以如果你有任何其他的解决方案可以帮助我解决问题,我很乐意接受一些关于它们的建议。

提问于
用户回答回答于

在打开的窗口中构建一个完整的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();
用户回答回答于

我做了类似于上面的例子,但发现它不适用于所有浏览器。以下内容已在所有主流浏览器上进行了测试,并为我工作。(请记住,某些样式可能依赖于父元素,因此如果您的div嵌套在这些元素中,则样式在打印窗口中可能与您的父页面中的样式看起来不完全相同)

function printWithCss() {
        //Works with Chome, Firefox, IE, Safari
        //Get the HTML of div
        var title = document.title;
        var divElements = document.getElementById('printme').innerHTML;
        var printWindow = window.open("", "_blank", "");
        //open the window
        printWindow.document.open();
        //write the html to the new window, link to css file
        printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
        printWindow.document.write(divElements);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();
        //The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
        setTimeout(function() {
            printWindow.print();
            printWindow.close();
        }, 100);
    }

扫码关注云+社区

领取腾讯云代金券