时间戳

首页 > 解决方案 > 为什么我的打印 iframe 中的 CSS 加载不一致？

javascript - 为什么我的打印 iframe 中的 CSS 加载不一致？

问题描述

所以，我的页面有一个我想要打印的 div。它使用 bootstrap 和 fontawesome 看起来不错。要打印它，我有一个按钮来创建一个 iframe，将 outerHTML 复制到它的主体，将一些 css 和 js 复制到它的头部，进行一些修改以适应 A4 纸，打印它然后将其删除。问题是我第一次单击该按钮时，它会以我想要的方式精美地显示 chrome 的打印页面，但是当我再次单击该按钮时，它会失去一些样式。

我注意到在 chrome 的 devtools 的网络选项卡上，js 和 css 文件第一次加载得很好，但之后在显示打印窗口时它显示为挂起，只有在我关闭它后才加载。

这是按钮调用的函数：

function print1(elem)
{
    $('<iframe>', {
        id: 'printFrame',
        name: 'printFrame',
        class: 'printFrame',
        style: 'display: none'
    }).appendTo('body').contents()

    .find('head')
        .append('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />')
        .append('<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">')
        .append('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed">')
        .append('<link rel="stylesheet" href="/css/wscustom.css" type="text/css">')
        .append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />')
        .append('<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" />')
        .append($('style')[0].outerHTML)
        .parent()

    .find('body')
        .css('font-family', 'Roboto, sans-serif')
        .css('font-size', '14px')
        .css('line-height', '1.428571429')
        .css('color', '#333')
        .css('box-sizing', 'border-box')
        .append('<div class="container">')
        .find('.container')
        .append($('#' + elem).clone())

    .find('div.col-xs-12.col-md-6.col-lg-4')
        .removeClass('col-xs-12').removeClass('col-md-6').removeClass('col-lg-4').addClass('col-4')
        .css('width', '31.7%')
        .css('margin', '5px')
        .css('height', '514px')
        .css('float', 'left')
        .css('position', 'relative')
        .find('.fa-redo').hide();

    window.frames['printFrame'].focus();
    window.frames['printFrame'].print();
    $("#printFrame").remove();
}

就像我上面提到的，我怀疑这与打印窗口打开时挂在“待处理”状态的 js 和 css 文件有关。

除了缺少很多引导样式之外，显示它何时工作的一个细节（我第一次单击按钮时）是蓝色和灰色的字体令人敬畏的星星。第一次单击后，有时会显示为黑色，有时根本不显示。

任何见解将不胜感激。

标签： javascriptjqueryhtmlcss

解决方案

它可能在所有内容加载之前打印。将您的打印操作放在 iframe 中，而不是父页面中，并将其包装在 READY 处理程序中。

$(document).ready(function() { window.print(); }

推荐阅读