Как работает функция печати Javascript? Могу ли я создать документ с использованием JavaScript и распечатать его? - PullRequest
Новая
       37

Как работает функция печати Javascript? Могу ли я создать документ с использованием JavaScript и распечатать его?

6 голосов
/ 08 августа 2009

Я знаю, что вы можете использовать window.print () для печати текущей страницы ... но я хочу знать, могу ли я создать документ с использованием javascript, чтобы заполнить его данными и распечатать?

Так же, как вы можете использовать html / xml в качестве объекта javascript, можете ли вы сделать что-то похожее на это: 

var name = "Matt";
var htmlDocumentToPrint = "<html><body><div style='width:300px; height:20px; background-color:#000; text-align:center;'>My name is " + name + "</div></body></html>";

htmlDocumentToPrint.print();

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

Ответы [ 8 ]

5 голосов
/ 08 августа 2009

Print () - это метод объекта окна. Если вы создаете документ в окне с помощью javascript, а затем вызываете print для этого оконного объекта, он должен работать. 

<script type="text/javascript">
    var myWindow = window.open('','','width=200,height=100')
    myWindow.document.write("This is 'myWindow'")
    myWindow.print();
</script>

Пример изменен с w3schools.com Пример открытия окна.

2 голосов
/ 08 августа 2009

Моя первая мысль:

Вы можете программно создать iframe, назначить HTML-код для печати, вызвать функцию print() в контексте iframe.contentWindow и затем удалить iframe из DOM: 

function printHTML(input){
  var iframe = document.createElement("iframe"); // create the element
  document.body.appendChild(iframe);  // insert the element to the DOM 

  iframe.contentWindow.document.write(input); // write the HTML to be printed
  iframe.contentWindow.print();  // print it
  document.body.removeChild(iframe); // remove the iframe from the DOM
}

printHTML('<h1>Test!</h1>');

Вы можете проверить приведенный фрагмент здесь .

1 голос
/ 26 июля 2012

Почему бы просто не сделать все невидимым для носителя = печати и затем сделать видимыми только некоторые блоки с вашим специальным кодом?

1 голос
/ 08 августа 2009

print (), по сути, просто вызывает собственный диалог печати для данного окна.

Но, как вы думаете, он будет работать в любом окне или (i) кадре.

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

window.frameName.print();

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

Лично мне хотелось бы, чтобы все браузеры реализовали следующее для решения вышеуказанной проблемы. ; -) 

window.printPreview();
0 голосов
/ 02 апреля 2015

Существует три подхода к печати, два из которых будут работать.

  1. Распечатать все окно: window.print(); будет работать.

  2. Печать только определенного кадра: window.parent._frame_id_.print(); будет работать.

  3. Печать documentFragment не будет работать (по крайней мере, в Firefox): document.createDocumentFragment().print();//undefined

0 голосов
/ 25 марта 2014

Существует простое решение, не требующее написания функции, а именно: window.print ()

Где бы вы ни хотели его использовать, просто положите - onClick = "window.print ();"

Пример 

<a href="" onClick="window.print();">Print</a>

Я тестирую его в каждом браузере, и он работает как шарм!

0 голосов
/ 05 августа 2013

Джек, вы пробовали window.print () внутри iframe после загрузки документа?

0 голосов
/ 08 августа 2009

Если вы делаете это во время загрузки документа, вы можете использовать document.write, чтобы написать текущий документ, а затем распечатать его.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...