Распечатать внешний HTML-файл с помощью Javascript - PullRequest
Новая
       1

Распечатать внешний HTML-файл с помощью Javascript

3 голосов
/ 29 мая 2011

У меня есть кнопка «Печать» на index.html.Какой код мне нужен для печати файла print.html?Я имею в виду, когда я нажимаю кнопку из index.html, выведите страницу print.html.

Ответы [ 3 ]

2 голосов
/ 29 мая 2011

Я думаю, вы ищете window.print()

Обновление

Только что заметили, что вы указали там имена файлов и что вы хотитепечатать print.html при нажатии кнопки на index.html.Нет встроенного способа сделать это (в том смысле, что вы не можете передать никакие аргументы window.print(), указывающие на документ для печати).Что вы можете сделать, это загрузить документ для печати в iframe или открыть новое окно и при загрузке вызвать window.print() для этого контейнера.

Вот несколько сообщений на форуме и веб-страниц, которые говорят об одном и том же:

Обновление 2

Вот некоторый быстрый и грязный код - обратите внимание, что это будет работать, только если обе ваши страницы находятся в одном домене.Кроме того, Firefox, похоже, запускает событие load и для пустого iframe - поэтому диалоговое окно печати будет отображаться немедленно при загрузке, даже если для iframe не было установлено значение src.

index.html 

<html> 
<head> 
  <title>Index</title> 
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script>
    $(document).ready(function(){
        $('#loaderFrame').load(function(){
            var w = (this.contentWindow || this.contentDocument.defaultView);
            w.print();
        });

        $('#printerButton').click(function(){
            $('#loaderFrame').attr('src', 'print.html');
        });
    });
  </script>
  <style>
     #loaderFrame{
        visibility: hidden;
        height: 1px;
        width: 1px;
     }
  </style>
</head> 
<body> 
    <input type="button" id="printerButton" name="print" value="Print It" />

    <iframe id="loaderFrame" ></iframe>
</body>
</html>

print.html 

<html> 
<head> 
    <title>To Print</title> 
</head> 
<body> 
    Lorem Ipsum - this is print.html
</body>
</html>

Обновление 3
Вы также можетехочу увидеть это: Как мне распечатать IFrame из javascript в Safari / Chrome

1 голос
/ 18 ноября 2017 
function closePrint () {
  document.body.removeChild(this.__container__);
}

function setPrint () {
  this.contentWindow.__container__ = this;
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.focus(); // Required for IE
  this.contentWindow.print();
}

function printPage (sURL) {
  var oHiddFrame = document.createElement("iframe");
  oHiddFrame.onload = setPrint;
  oHiddFrame.style.visibility = "hidden";
  oHiddFrame.style.position = "fixed";
  oHiddFrame.style.right = "0";
  oHiddFrame.style.bottom = "0";
  oHiddFrame.src = sURL;
  document.body.appendChild(oHiddFrame);
}

Затем используйте 

onclick="printPage('print_url');"
1 голос
/ 28 марта 2014

Вы можете использовать плагин JQuery printPage (https://github.com/posabsolute/jQuery-printPage-plugin). Этот плагин отлично работает, и вы можете просто напечатать внешнюю HTML-страницу.

Пример: 

 <html> 
    <head> 
      <title>Index</title> 
      <script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
      <script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
      <script>
         $(document).ready(function() {
             $(".btnPrint").printPage();
         });
      </script>
    </head> 
    <body> 
        <input type="button" id="printerButton" name="print" value="Print It" />

        <p><a class="btnPrint" href='iframe.html'>Print!</a></p>
    </body>
 </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...