Fatal编程技术网
  • javascript/
  • 打开一个新的javascript窗口（.Open）及其CSS样式

打开一个新的javascript窗口（.Open）及其CSS样式

javascript jquery html css printing

打开一个新的javascript窗口（.Open）及其CSS样式,javascript,jquery,html,css,printing,Javascript,Jquery,Html,Css,Printing,我正试图让这个功能在我正在进行的一个项目的网站上运行。此函数的目的是仅（物理）打印子div的内容，该子div同时被称为selector#content 这是我到目前为止得到的一点： <script> function printContent() { window.open().document.write($("#content").html()); window.print(); window.close(); }

我正试图让这个功能在我正在进行的一个项目的网站上运行。此函数的目的是仅（物理）打印子div的内容，该子div同时被称为selector#content

这是我到目前为止得到的一点：

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


函数printContent（）{
window.open（）.document.write（$（“#content”）.html（））；
window.print（）；
window.close（）；
}
当一个人点击“打印”超链接时，该功能被触发。新窗口将加载从另一个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>

    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();
    });




阿尔及利亚信息
BSN:$！person.bsn
沃纳姆：$！人名
阿彻纳姆：$！person.name_前缀$！人名
格斯拉希特：$！个人性别
Woonadres:$！个人地址
普拉特斯纳姆：$！个人位置
普罗文西：$！个人省
邮政编码：$！person.zipcode
电话：nummer thuis:$！person.h_号码
莫比尔·努默：$！个人移动电话号码
汉堡包摊：$！person.m_状态
兰德·凡·赫尔科姆斯特：$！个人出身
Naam实例：
地址实例：
邮政编码实例：
电话：instantie：
传真实例：
电子邮件实例：
网站实例：
-:
-:
-:
它只是不能同时加载样式。所有内容都将在左上角出现。我尝试过通过JS链接CSS，或者按照另一个页面上的建议将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();

var-win=window.open（“”，'printwindow'）；
win.document.write（'Print it！'）；
win.document.write（$（“#content”）.html（）；
win.document.write（“”）；
win.print（）；
win.close（）；
我也有同样的问题。我发现它是在css有时间在页面上呈现之前打印的。我所做的是在打印调用时设置超时，然后所有样式都显示在打印文档中。如果我没有超时，我发现打印调用中没有提取样式。

我做了类似于上面示例的操作，但发现它在所有浏览器中都不起作用。以下内容已在所有主要浏览器上进行了测试，对我很有用。（请记住，某些样式可能依赖于父元素，因此如果div嵌套在这些元素中，则打印窗口中的样式可能与父页面中的样式不完全相同）

函数printWithCss（）{
//与Chome、Firefox、IE、Safari一起使用
//获取div的HTML
var title=document.title；
var divElements=document.getElementById（'printme'）.innerHTML；
var printWindow=window.open（“，”_blank“，”）；
//打开窗户
printWindow.document.open（）；
//将html写入新窗口，链接到css文件
printWindow.document.write（“”+标题+“”）；
printWindow.document.write（divElements）；
printWindow.document.write（“”）；
printWindow.document.close（）；
printWindow.focus（）；
//超时只是为了让Safari正常工作，但它仍然适用于FF、IE和Chrome。
setTimeout（函数（）{
printWindow.print（）；
printWindow.close（）；
}, 100);
}
我在页面呈现后也遇到了CSS加载问题，因此解决方案是读取CSS文件内容并将其写入新文档：

<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>

    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();
    });

var w=window.open（）；
jQuery.get（'/styles.css'，函数（数据）{
w、 文件。写（“”）；
w、 文件。写入（数据）；
w、 文件。写（“”）；
w、 document.write（$（'.print content'）.html（））；
w、 文件。写（“”）；
w、 打印（）；
w、 close（）；
});
我想从父页面打印所有样式并打印。所以我想在头部使用所有css链接

我的解决方案使用jQuery

（函数打印（）{
//获取要打印的标记元素
//克隆内容，使其不被弄乱
//删除所有可能嵌入的脚本
var printContents=$（'body'）.clone（）.find（'script'）.remove（）.end（）.html（）；
//获取所有并从标题中删除可在新窗口上运行的所有
var allLinks=$（'head'）.clone（）.find（'script'）.remove（）.end（）.html（）；
//打开一个新窗口
var popupWin=window.open（''，''u blank'）；
//准备好写作了吗
popupWin.document.open（）；
//-调整webkit打印颜色以保持打印版本的颜色
var keepColors='body{-webkit打印颜色调整：精确！重要；}'；
//书写
//onload=“window.print（）”以打印straigthaway
popupWin.document.write（“”+keepColors+allLinks+“”+printContents+“”）；
//结束写作
popupWin.document.close（）；
})();
如果有人试图用Angular实现这一点，请将您的CSS文件放在assets文件夹中。

此代码适用于我使其成为windows center

<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>
继续之前，请更改作为veldbox提供的id。在一个页面中多次使用ID不是一个好的做法。用课堂来代替它。我一周前也说过这句话。谢谢你指出这一点！我会马上改变的。这是一个基本的先决条件。您可以尝试Reeno提供的功能。它将按预期工作。：）不完全是。在将hit格式化为CSS样式后，它仍然无法正确打印。你的代码应该可以工作，它得到了