制作bootstrap打印看起来与屏幕设计类似

问题描述 投票:0回答:1

任何人都知道是否存在任何打印样式表,这些样式表针对打印类似于屏幕上实际显示的页面进行了优化?我知道不可能完全相同,但即使是略微相似的外观(类似风格的表等)也会有所帮助。

默认的打印样式表完全破坏了外观。

css twitter-bootstrap twitter-bootstrap-3
1个回答
0
投票

这不是不可能的

  1. 克隆容器/ div以获取要打印的HTML
  2. 将CSS添加到头部
  3. 创建一个新窗口
  4. 将克隆的数据插入新窗口
  5. on document ready trigger print命令

function print() {

    var containerToPrint = '';

    containerToPrint = $(".container-needs-to-print").clone();
    /* can be body */

    // insert you CSS in head in new window
    var totalHtml = '<head><link rel="stylesheet" href="' + urlPath + 'css/style.css"></head>' +
        '<body>' + containerToPrint.html() + '</body>';

    // create a new window
    var newWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width() + '');

    // add content to new window
    newWindow.document.write(totalHtml);
    newWindow.focus();

    $(document).ready(function () {
        setTimeout(function () {
            newWindow.print();
            newWindow.close();
        }, 2000);
    });
}
© www.soinside.com 2019 - 2024. All rights reserved.