Как вы печатаете из всплывающего окна в javascript?

у меня есть приложение .Net, которое динамически создает небольшую HTML-страницу и всплывает в новом окне с помощью документа javascript.открытый способ. Все с этой функциональностью работает нормально.

теперь я хочу добавить кнопку на HTML-страницу, которая печатает страницы. Я попытался использовать следующий код безрезультатно:

<a href='print.html' onClick='window.print();return false;'>
<img src='images/printer.png' height='32px' width='32px'></a>

при нажатии кнопки во всплывающем окне, ничего не происходит. Но когда исходный код этой страницы сохраняется и загружается в браузере как отдельной странице, кнопка печати работает отлично. Итак, похоже, что проблема вызвана тем, что код во всплывающем окне. [проблема теперь заключается в том, что код записывается во всплывающее окно после его открытия.] Кто-нибудь знает способ решить эту проблему или какие-либо альтернативы?

EDIT:

другой метод, который я пробовал с тем же результатом:

<input type='button' onclick='window.print()' value='Print' />

и

<a href='javascript:window.print()'>
<img src='images/printer.png' height='32px' width='32px'></a>

изменить Опять:

приведенный выше код работает в Firefox, но не в IE7. Есть идеи по работе вокруг IE?

РЕДАКТИРОВАТЬ ЕЩЕ РАЗ:

вот тестовый пример с использованием кода, который npup опубликовано ниже. Вместо кода для всплывающего окна, живущего в отдельном html-файле, я открываю пустой url-адрес, а затем пишу код к нему. Этот шаг, по-видимому, является причиной проблемы.

<html>
<head>
    <title>main</title>
</head>
<body>
    <h1>
        Pop & print</h1>
    <button onclick="pop();">
        Pop</button>

    <script type="text/javascript">
      var POP;
      function pop() {
          var newWin = window.open('', 'thePopup', 'width=350,height=350');
        newWin.document.write("<html><head><title>popup</title></head><body><h1>Pop</h1>" +
            "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
            "<img src='images/printer.png' height='32px' width='32px'></a></body></html>");
      }
    </script>

</body>
</html>
6
.net javascript popup printing

9 ответов

вот решение, которое сработало для меня:

newWin.document.write( newhtml );
newWin.window.location.reload();    // this is the secret ingredient
newWin.focus();                     // not sure if this line is necessary
newWin.print();

Я не уверен на 100%, почему это работает, но я думаю, что это связано с одним из следующих: (1) проблема безопасности IE, (2) Проблема области (т. е. после создания нового документа, IE запутался в том, какой документ печатать) или (3) проблема времени - документ еще не готов "принять" команду печати. В любом случае, после перезагрузки диалог печати появляется без проблем.

8

это может быть потому, что вы делаете return false в событии onclick тега привязки.

попробуйте это: 

<input type="button" onclick="window.print()" value="Print" />
3

можно попробовать:

<input type="button" onclick="self.print()" value="Print" />

или:

<input type="button" onclick="window.focus();window.print()" value="Print" />

но это может не работать в MSIE из-за ограничений в Кросс-Рамки Сценариев. Лучший способ сделать это, я думаю, это поставить кнопку печать в главном окне.

<script language="javascript">
    var winref = window.open('print.html','windowName','width=400,height=400');
</script>

<form>
    <input type="button" value="Print Popup" onclick="if (window.print) winref.print()">
</form>
1

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

вот небольшой тестовый пример. Попробуйте в своей настройке и посмотрите, что произойдет! Моя проверка была под Windows Vista, IE7 и IE8.

main.HTML-код: 

<html>
    <head>
    <title>main</title>
    </head>
    <body>

    <h1>Pop & print</h1>
    <button onclick="pop();">Pop</button>
    <script type="text/javascript">
      var POP;
      function pop() {
        POP = window.open('popup.html', 'thePopup', 'width=350,height=350');
      }
    </script>

    </body>
  </html>

всплывающее окно.HTML-код: 

<html>
    <head>
    <title>popup</title>
    </head>
    <body>

    <h1>Pop</h1>
    <p>Print me</p>
    <a href="print.html" onclick="window.print();return false;">
        <img src="images/printer.png" height="32px" width="32px">
    </a>

    </body>
  </html>
1

Я решил проблему, создав пустую HTML-страницу со стандартной разметкой HTML. Затем я добавил содержимое, создав новый элемент DOM и отредактировав innerHTML. Полученный код такой же, как и в Примере, просто заменяет newWin.документ.напишите команду со следующим:

var newDiv = newWin.document.createElement( 'div' );
newDiv.innerHTML = "<h1>Pop</h1>" +
        "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
        "<img src='images/printer.png' height='32px' width='32px'></a>"
newWin.document.body.appendChild(newDiv);

хотя проблема была решена, я честно не уверен, что было точной причиной проблемы. Если у кого-то есть идеи, буду рад их услышать.

1

вы забыли:

newWin.document.close();

документ должен быть закрыт, прежде чем msie сможет его распечатать.

1

это работает в Chrome: 

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 1);
                };
            </script>
    </body>
1

Если вы хотите распечатать то, что находится в открывшемся окне С, Я предлагаю вам использовать

window.opener.print();

в выпадающем окне.

0

Я хотел создать дружественную к принтеру версию страницы, которая затем автоматически печатается, это то, что я придумал, кажется, отлично работает для меня!

 function printPage(){
  var w = window.open();

  var headers =  $("#headers").html();
  var field= $("#field1").html();
  var field2= $("#field2").html();

  var html = "<!DOCTYPE HTML>";
    html += '<html lang="en-us">';
    html += '<head><style></style></head>';
    html += "<body>";

    //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
    //This allows you to reuse this on lots of pages with the same template
    if(headers != null) html += headers + "<br/><br/>";
    if(field != null) html += field + "<br/><br/>";
    if(field2 != null) html += field2 + "<br/><br/>";

    html += "</body>";
    w.document.write(html);
    w.window.print();
    w.document.close();
};
0