Есть ли способ принудительного размещения содержимого div на одной бумаге (букве) при печати / сохранении в формате PDF из Chrome?

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