Как вы печатаете из всплывающего окна в JavaScript? - PullRequest
Новая
       12

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

6 голосов
/ 15 марта 2010

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

Теперь я хочу добавить кнопку на страницу 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>

Ответы [ 9 ]

8 голосов
/ 02 марта 2012

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

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) из-за проблемы синхронизации - документ еще не готов «принять» команду печати. В любом случае после перезагрузки диалог печати появляется без проблем.

3 голосов
/ 15 марта 2010

Это может быть связано с тем, что вы возвращаете false в событии onclick тега привязки.

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

<input type="button" onclick="window.print()" value="Print" />
1 голос
/ 30 апреля 2014

Это работает в 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 голос
/ 18 июля 2010

Вы забыли: 

newWin.document.close();

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

1 голос
/ 31 марта 2010

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

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 голос
/ 17 марта 2010

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

Вот небольшой тестовый пример. Попробуйте в настройках и посмотрите, что получится! Моя проверка проводилась под 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>

popup.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 голос
/ 15 марта 2010

Вы можете попробовать: 

<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>
0 голосов
/ 19 апреля 2013

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

 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 голосов
/ 15 марта 2010

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

window.opener.print();

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

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

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

...