Печать нескольких страниц с помощью Javascript

Question

У меня есть сайт, на котором пользователи нажимают кнопку «Читать дальше», чтобы они могли просматривать остальную информацию на странице. Мне любопытно, как я могу это сделать, чтобы пользователям не приходилось печатать каждую страницу отдельно. Я хотел бы иметь возможность сделать так, чтобы у меня был скрипт, связанный с страницами, связанными с печатью. Если бы кто-нибудь мог мне помочь и указать мне в правильном направлении, это было бы очень признательно. Мне нужна эта функциональность для работы во всех браузерах.

Благодаря

Answer 1

Что вам нужно будет сделать, это стильная таблица, в которой используются стили мультимедиа. В основном это похоже на наличие двух отдельных таблиц стилей; один для печати и один для просмотра. Чтобы сохранить полосу пропускания, оставляйте printarea пустым до тех пор, пока запрос не будет выполнен. В событии запроса заполните printarea с целым отпечатом, который вы должны сделать. Я бы посоветовал вам заглянуть в jQuery и их загрузку и запросы ajax для этого.

@media screen 
    { 
    #screenarea 
     { 
     display: block; 
     } 
    #printarea 
     { 
     display: none; 
     } 
    } 
@media print 
    { 
    #screenarea 
     { 
     display: none; 
     } 
    #printarea 
     { 
     display: block; 
     } 
    } 

Answer 2

Мое шестое чувство первый сказал мне, что это потребует решения на основе сервера, так как функция window.print печатает только то, что в настоящем документе, и что вы должны написать код сервера для создания веб-страницы состоящий из всех страниц, которые вы хотите распечатать, и вызывать на этой странице window.print.

Но вы можете сделать работу jQuery для вас, загрузив страницы, которые будут напечатаны с помощью функции .load, а затем после того, как все страницы будут загружены, вызовите window.print. Если вы не можете использовать jQuery по какой-то причине, вы можете написать всю сантехнику самостоятельно, используя XHR.

Трудно предоставить более подробный ответ без какой-либо информации о структуре вашего веб-приложения.

Answer 3

Я думаю, что вы можете распечатать его на IFRAME внутри слоя

tihs является примером (не очень хорошо, но работает за идею):

http://www.fffast.com/scripts/script_iframing.shtml

Answer 4

В вообще, вы не будете использовать JavaScript для доступа к нескольким страницам и распечатать их. (Если это возможно, похоже, что это будет немного взломать.)

Вместо этого вы, вероятно, захотите иметь одну страницу, которая содержит всю информацию для печати, CSS-стиле для printability, который пользователь будет просматривать и иметь возможность печатать. (В этом случае вы можете легко использовать JavaScript для начала действия печати.)

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

Вы даже можете сделать это еще дальше и сделать его более динамичным. Может быть, есть флажки рядом с заголовками для каждого раздела информации и кнопка «распечатать выбранную», которая будет размещать выборы на сервере и отображать только выбранную информацию на странице «распечатать все».

Я просто чувствую, что, как пользователь, это будет больше соответствовать least astonishment чем что-то, что печатает вещи, которые я даже не загружал в первую очередь (где вы также рискуете слишком много пересылать на принтер пользователя и тратя их ресурсы).

Edit:

Другой подход, который только что произошло со мной. В первую очередь, нужно ли все содержимое размещать на отдельных страницах? Возможно, просто поместите содержимое в div s, которые по умолчанию скрыты, а ссылка «читать дальше» показывает связанный div. Тогда все, что вам нужно для пригодности для печати, это вышеупомянутый стиль мультимедиа CSS. При просмотре в браузере они могут разворачивать/сворачивать разделы информации по отдельности, но когда страница печатается, все расширяется.

Answer 5

После того, как все материалы в одной веб-странице (с помощью инъекции или серверный процесс), форматирование страниц использует CSS атрибуты для @media печати, например:

@media print { 
    h1 {page-break-before: always;} 
} 

Другие атрибуты «PAGE- break-after "и" page-break-inside ", последний из которых помогает избежать перерывов внутри контента.