Версия для печати Google Visualizations DataTable

Question

У меня есть специальное приложение для маршрутизации, которое получает информацию о маршруте с карт Google. Затем он создает таблицу данных Google Visualizations для хранения всех шагов в маршруте.

Моя текущая проблема заключается в том, что для уменьшения переполнения для очень больших маршрутов я включил разбиение на страницы в параметрах DataTable. Это приводит к не очень удобной для печати версии, поскольку будет напечатана только та часть данных, которая указана в таблице. Другие части таблицы динамически загружаются API, когда вы нажимаете prev и next.

Есть ли не такой сложный способ заставить DataTable быть дружественным к принтеру, когда приходит время, не жертвуя возможностью включения подкачки?

Answer 1

Так я решил эту проблему. Я не приму мой собственный ответ на случай, если у кого-то будет что-то более элегантное.

Изначально у меня было:

var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "enable",
    pageSize: 9
});

Я добавил еще один, который пошел в div, который я бы спрятал с помощью css.

//Create a second Visualization that Will be hidden.
   var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "disable"
});

Затем я добавил следующие правила в один из моих css-файлов.

 @media print  
    {
        #table{ display:none; }
    }
 @media screen
    {
         #printerFriendly{ display:none;}
    }

Это скрывает одну таблицу при обычном использовании и скрывает другую во время печати. Я надеялся на что-то более чистое, чем это, но это решение было очень легко реализовать.

Answer 2

Есть несколько способов сделать это.

Если изменения, необходимые для того, чтобы сделать страницу «дружественной к принтеру», могут быть сделаны исключительно путем изменения стиля CSS, все, что вам нужно сделать, это добавить еще одну таблицу стилей для печатных носителей:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Это довольно простой и прозрачный способ сделать это: таблица стилей для печатных носителей, которая будет использоваться для печати, а исходная таблица стилей будет использоваться для просмотра в Интернете.

Таким образом, вы можете изменить способ отображения вещей или даже включить видимость, независимо от того, просматриваете ли вы их в Интернете или распечатываете ..., что должно привести вас туда, где вам нужно.

Если честно, я не слишком знаком с тем, что вы делаете, но похоже, что пользователь должен сделать новый запрос для каждой страницы ... в этом случае только CSS-стилизация вам не поможет.

Вам придется либо сделать информацию доступной для всех на одной странице (только невидимые части), либо настроить функцию в приложении или опцию и так далее, которая выплевывает версию для печати. ​​