Question

我正在尝试打印来自服务器端的HTML。我现在面临的主要问题是，由于某些原因，css未被应用。看到小提琴。我在做错什么吗？

P.S。带有框架的JS用于在同一选项卡中打开打印窗口。以前，我遇到麻烦，即在打开新标签页时，原始标签页上的JS停止工作，直到我关闭了第二个包含打印内容的标签页为止。

@media print {
  body * {
    visibility: hidden;
  }
 .test {
   visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    color: red;
    -webkit-print-color-adjust: exact; 
  }
}

JS：

document.querySelector("#print").addEventListener("click", function() {
     var html = '<div class="test">Test</div>';
     print(html);
});

function print(html) {
    // https://www.sitepoint.com/5-jquery-print-page-options/
    document.innerHTML = html;
    $('<iframe>', {
        name: 'myiframe',
        class: 'printFrame'
    }).appendTo('body').contents().find('body').append(html);

    window.frames['myiframe'].focus();
    window.frames['myiframe'].print();
    setTimeout(() => { $(".printFrame").remove(); }, 1000);
}

Answer 1

我正在使用一个库来做到这一点：https://github.com/DoersGuild/jQuery.print

用于打印的CSS不适用于动态生成的HTML

1 个答案: