Question

我正在使用以下代码来打印文档：

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

var html = '<head>' +
               '<link rel="stylesheet" href="/static/css/main.css" type="text/css" media="print">' +
               '<link rel="stylesheet" href="/static/css/vahan.css" type="text/css" media="print">' +
               '</head>' +
               '<body>' +
               '<div>Test</div>' +
               '</body>';
print(html);

问题是我看到没有应用任何CSS的纯HTML。肯定有一些简单的事情我不知道。有提示吗？

Answer 1

您需要先将html附加到文档中，然后才能添加iframe。

function print(html) {
  // Add the html
  document.innerHTML = html

  // Append the iframe to the body
  $('<iframe>', {
    name: 'myiframe',
    class: 'printFrame'
  }).appendTo('body').contents();

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

CSS不适用于打印的文档

1 个答案: