Question

每当我要打印/保存以pdf表示该视图时，我都试图将视图适合单个页面。该视图包括一个动态表，其中的内容是不可预测的。我的问题是，只要表太长，视图的后半部分就会被剪切并在下一页继续。我只是通过缩放CSS来调整视图以进行打印。我的缩放比例当前设置为66％，并且由于表行数无法预测，因此很难找到最佳位置。这是根本不可能的吗？

附上截图以供参考：

Answer 1

最好的地方，也许不是。

表格在印刷品中可能非常讨厌。

假设每个表都在表容器内部，并且表的大小有限。

样式：

<style type='text/css'>
    .table-container {
        width: 700px;
        overflow: scroll;
    }

    table {
        width: 100;
    }
</style>

HTML：

<div class="table-container">
    <table>
    ...
    </table>
</div>

脚本：

首先在脚本顶部向JQuery添加扩展：

jQuery.fn.hasHScrollBar = function () {
   return this.get(0).scrollWidth > this.innerWidth();
}

然后循环浏览，直到我们达到完全不可读的最小字体大小或滚动条消失，以先到者为准。

$(document).ready(function () {
    $('.table-container').each(function() {
        var font_size = 24;
        var min_font_size = 5;
        while ($(this).hasHScrollBar()) {
            if (font_size < min_font_size)
                return false;
            $('table').css("font-size", font_size + "px");
            font_size--;
        }
        $(this).css("overflow", "hidden");
    });
});

或作为按钮：

$("#print-button").click(function () {
    $('.table-container').each(function() {
        var font_size = 24;
        var min_font_size = 5;
        while ($(this).hasHScrollBar()) {
            if (font_size < min_font_size)
                return false;
            $('table').css("font-size", font_size + "px");
            font_size--;
        }
        $(this).css("overflow", "hidden");
    });
    window.print();
});

-更新-

或带有缩放比例的整个事情：

body {
    width: 700px;
    overflow: scroll;
}

.page {
    width: 100%;
}

假设您有一个称为Page的顶级元素，它包装了整个内容。由于缩放将自身固定在元素的中心，因此需要进行一些额外的调整，例如设置左边界。它可以在最新版本的Chrome，Opera，IE和Firefox中运行。

$("body").each(function () {
    var innerPage = $(this).find(".page");
    var BaseWidth = parseInt($(innerPage).css("width"));
    var CalcWidth = BaseWidth;
    var scale = 1.0;
    var min_scale = 0.2;
    while ($(this).hasHScrollBar()) {
        if (scale < min_scale)
            break;
        CalcWidth = parseInt(BaseWidth * scale);
        $(innerPage).css("transform", "scale(" + scale + ")");
        $(innerPage).css('margin-left', (-1 * ((BaseWidth - CalcWidth)/2)));
        scale -= 0.1;
    }
    $(this).css("overflow", "hidden");
});

从Chrome打印/保存为pdf时，是否可以将div内容强制调整为单张纸（字母）？

1 个答案: