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

Я знаю, что вы можете использовать окно.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();

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

6
dom html javascript printing

8 ответов

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

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

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

4

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

вы можете создать 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>');

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

2

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

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

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

window.frameName.print();

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

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

window.printPreview();
1

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

1

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

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

0

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

0

существует простое решение, доступное нет необходимости писать функцию, и это-окно.print ()

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

пример 

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

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

0

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

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

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

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

0