首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS不适用于打印文档

CSS不适用于打印文档
EN

Stack Overflow用户
提问于 2018-07-13 04:40:21
回答 1查看 34关注 0票数 0

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

代码语言:javascript
复制
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);

问题是我看到的是纯html,没有应用任何css。肯定有一些简单的事情我搞不懂。有什么提示吗?

EN

回答 1

Stack Overflow用户

发布于 2018-07-13 04:47:35

在添加iframe之前,您需要首先将html附加到文档。

代码语言:javascript
复制
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);
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51314101

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档