Как показать пользовательский предварительный просмотр для печати / с разбивкой по страницам (с Page Boxes), используя Javascript и CSS?

Question

Мне нужно показать предварительный просмотр (прокручиваемый на одной странице) содержимого HTML.

Пожалуйста, внимательно прочитайте следующее и предложите мне решение для того же.

Ввод будетбыть динамическими необработанными данными (содержимое может быть огромным), Можем ли мы применить некоторые стандартные пользовательские CSS или javascript и показать предварительный просмотр содержимого на странице. T *Предварительный просмотр печати должен иметь поля (пробелы) со всех сторон и должен выглядеть так, как если бы содержимое помещалось в страничные блоки. *

Предположим, что необработанные данные имеют 200 строк, предварительный просмотр печати будет показан50 строк / страница,

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

Заранее спасибо, Чандра

Answer 1

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

Кроме того, необходимая информация (например, размер страницы и поля принтера) недоступна из браузера.

Вместо этого пользователи могут использовать встроенный в браузер предварительный просмотр печати.

Answer 2

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

Мне кажется, эта статьяможет быть хорошим руководством: http://css -tricks.com / css-tricks-finally-gets-a-print-stylesheet /

после того, как вы сделали свою таблицу стилей печати, вы можетепросто используйте jquery для переключения таблиц стилей на HTML-контент одним нажатием кнопки.

Answer 3

Я не уверен, правильно ли я понял ваш вопрос, но:

Полагаю, вы можете создать страницу, используя поля, отступы и высоту строки для изменения содержимого страницы. Также вы связываете css файл с media = "print" , <link rel="stylesheet" type="text/css" media="print" href="foo.css">

Затем вы делаете несколько предварительных просмотров из браузера, чтобы проверить внешний вид. Когда все в порядке, вы можете добавить iframe на страницу предварительного просмотра, которая связывает страницу печати. ​​