Версия для печати Google Визуализации DataTable

Question

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

Моя текущая проблема заключается в том, что для уменьшения переполнения для очень больших маршрутов я включил пейджинг в параметрах 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 вам не поможет.

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