Question

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

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

Answer 1

这不是不可能的

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

＆＃13;

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);
    });
}

＆＃13;

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

1 个答案: