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

【问题标题】：Open a new javascript window(.open) along with its CSS styling打开一个新的 javascript 窗口 (.open) 及其 CSS 样式
【发布时间】：2013-09-16 11:41:17
【问题描述】：

我正在尝试让此功能在我正在处理的项目的网站上运行。此函数的目的是仅（物理上）打印子 div 的内容，该子 div 恰好称为选择器#content。

这是我到现在为止的一点点：

<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 解决这个问题，所以如果你有任何其他解决方案可以帮助我解决我的问题，我很高兴并且愿意接受一些关于它们的建议。

提前致谢！

【问题讨论】：

在继续之前，请将提供的 id 更改为 veldbox。在一个页面中多次使用 ID 不是一个好习惯。代替它，使用类。
一周前我也有这句话。感谢您指出了这一点！我马上改。
这是一个基本的先决条件。你可以试试 Reeno 提供的东西。它将按预期工作。 :)
不完全。在将 hit 格式化为 CSS 样式后，它仍然无法正确打印。你的代码应该可以工作，它让我朝着正确的方向前进。不过，我想确切地知道为什么以这种方式打印页面。我目前正在寻找通过 Servoy 将内容转换为 PDF 文件。这次我应该可以自己做。

标签： javascript jquery html css printing

【解决方案1】：

此代码适用于我，使其成为窗口中心。

<a href="http://twitter.com/intent/tweet?text=[TWEET_CONTENT_GOES_HERE]" 
  onclick="window.open(this.href, 
  'twitterwindow', 
  `top=${(screen.height - 570)/2}, left=${(screen.width - 570)/2}, width=600, 
   height=300, resizable=1`); return false;">
  Tweet this
</a>

【讨论】：

【解决方案2】：

以防万一有人试图用 Angular 实现这一点，请将您的 CSS 文件放在 assets 文件夹中。

【讨论】：

【解决方案3】：

我想拥有父页面和打印中的所有样式。所以我想使用 HEAD 中的所有 css links。

我的解决方案使用 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();
})();

【讨论】：

【解决方案4】：

我也遇到了页面渲染后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();
    });

【讨论】：

【解决方案5】：

我做了与上述示例类似的操作，但发现它不适用于所有浏览器。以下内容已在所有主要浏览器上进行了测试，适用于我。（请记住，某些样式可能依赖于父元素，因此如果您的 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);
    }

【讨论】：

我不知道谁投了你的票，但我投了你的票：经过 3 小时的尝试，你的小费最终成功了！看起来它与 ..document.open/close 部分有关！
setTimeout +1，因为没有它我的打印预览是空的。添加 setTimout 允许它先渲染，然后打印。
很好，你的解决方案对我有用，非常感谢:) setTimeout(function() { ...} 对我有用，否则它会在打印屏幕上显示空白页。

【解决方案6】：

我有同样的问题。我发现它在 css 有时间在页面上呈现之前打印。我所做的是在打印调用上执行 setTimeout ，然后所有样式都显示在打印文档中。如果我没有超时，我发现在打印调用中没有选择样式。

【讨论】：

【解决方案7】：

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

【讨论】：

我已经尝试过您的解决方案。 CSS 被加载到新窗口中，这很好。当我实际打印它时，它不会打印具有相同布局的页面。可能有一些明显的原因，我在认知上太受挑战而无法真正找到自己，哈哈。启发我！
不知道... CSS 样式是否仅针对特定的媒体类型设置？ HTML 中的 media="screen" 或 CSS 文件中的 @media screen if？
我还没有设置任何媒体类型规则。将这些样式选择器添加到其中是否是个好主意？
如果您不需要它们，我不会添加它们。很难说为什么它不起作用。当浏览器显示正确的样式时（不仅需要加载 CSS 文件，还必须将 CSS 规则应用于 HTML），它们也应该被正确打印。
如果您需要从父页面添加多个样式表并且希望以编程方式添加，请参阅我的解决方案。