Javascript 如何打印具有原始样式的HTML元素？_Javascript_Jquery_Html_Css_Angular

Javascript 如何打印具有原始样式的HTML元素？

javascript jquery html css angular

Javascript 如何打印具有原始样式的HTML元素？,javascript,jquery,html,css,angular,Javascript,Jquery,Html,Css,Angular,我正在尝试使用window.print打印HTML元素；但是html是在没有原始样式的情况下查看的。我怎样才能修好它打印发票{ var mywindow=window.open，打印； mywindow.document.write； mywindow.document.write； mywindow.document.write$html2pdf[0].outerHTML； mywindow.document.write； mywindow.document.close； mywindow

我正在尝试使用window.print打印HTML元素；但是html是在没有原始样式的情况下查看的。我怎样才能修好它

打印发票{ var mywindow=window.open，打印； mywindow.document.write； mywindow.document.write； mywindow.document.write$html2pdf[0].outerHTML； mywindow.document.write； mywindow.document.close； mywindow.focus； mywindow.print； mywindow.close；返回true； } css:

@媒体印刷品{ 发票{ 填充：30px； } .发票{ 位置：相对位置；背景色：fff；最小高度：680px；填充：15px； } .发票抬头{ 填充：10px0；边缘底部：20px；边框底部：1px实心3989c6； } }

渲染基于html、css和js进行。这就是为什么在新页面中需要这三个选项

假设您的css和js只在头部，您可以执行以下操作

printInvoice() {
    var mywindow = window.open("", "PRINT");

    mywindow.document.head.append(document.head)
    mywindow.document.body.innerHTML = $("#html2pdf")[0].outerHTML;
    mywindow.focus();
    mywindow.print();
    mywindow.close();

    return true;
  }

谢谢你们的帮助，以下是对我有用的东西：

 printInvoice() {
    var mywindow = window.open("", "PRINT");

    mywindow.document.write("<html>");

    mywindow.document.write(document.head.outerHTML);
    mywindow.document.write("<body>");
    mywindow.document.write(document.getElementById("html2pdf").outerHTML);
    mywindow.document.write("</body></html>");

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

    mywindow.print();
    mywindow.close();

    return true;
  }

您是否尝试过遵循本文中的步骤？您正在打开一个空白的新页面/选项卡。你也应该在那里写css为什么不document.getElementByIdhtml2pdf.outerHTML现在你正在使用DOM无论如何感谢@BrunoGois这篇文章非常有用，不幸的是它没有一个工作示例。感谢你的分享，它工作了，但是现在关闭弹出窗口后，主页损坏了，我修复了它，并将在下一篇评论中分享解决方案。