Question

我正在尝试创建一个“单击此处以打印页面”

<script type="text/javascript">
function PrintElem ()
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head>');
    mywindow.document.write(document.head.innerHTML)
    mywindow.document.write('</head><body >');
    mywindow.document.write(document.body.children[1].innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();
}
</script>

<a onClick="printElem()" href="#"> print a div! </a>

所有样式都包含在Head中，但是由于某些原因，当我单击print a div!链接时会跳过这些样式，但是在打开DevTools的情况下单击时会包含这些样式吗？

为什么？

Answer 1

你离这里太近了。函数PrintElem()不应大写，因为您使用的是驼峰式printElem()

在更正大写字母问题时可以正常工作。无需其他更改。

<script type="text/javascript">
function printElem ()
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head>');
    mywindow.document.write(document.head.innerHTML)
    mywindow.document.write('</head><body >');
    mywindow.document.write(document.body.children[1].innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();
}
</script>

<a onClick="printElem()" href="#"> print a div! </a>

仅在devtools打开时才包含渲染？

1 个答案: