Как распечатать содержимое iFrame с помощью Javascript на iPad? - PullRequest
Новая
       20

Как распечатать содержимое iFrame с помощью Javascript на iPad?

4 голосов
/ 03 октября 2011

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

function printUrl( elem, url ) {
    $( '#' + elem ).append( "<iframe style='border: none; width: 0; height: 0; margin: 0; padding: 0;' src='" + url + "' id='printFrame'></iframe>" );

    $( '#printFrame' ).load( function() {
        var w = ( this.contentWindow || this.contentDocument.defaultView );
        w.focus();
        w.print();
    } );
}

Существует только небольшая проблема с этимкод при использовании iPad.IPad печатает страницу, которая содержит iFrame вместо содержимого iFrame.Тем не менее Safari на Mac правильно печатает содержимое iFrame.

Кто-нибудь уже решил эту проблему и смог напечатать содержимое iFrame на iPad?

Ответы [ 2 ]

1 голос
/ 06 октября 2011

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

Поскольку iPad / iPhone просто печатает родительскую страницу, я оборачиваю все тело в новый div, затем добавляю iFrame и некоторые таблицы стилей, которыеубедитесь, что напечатанный документ содержит только iFrame: 

function printUrl( url ) {
    $newBody = "<div class='do_not_print_this'>"
                + $( 'body' ).html()
                + "</div>"
                + "<iframe style='border: none; 0; width: 100%; margin: 0; padding: 0;' src='" + url + "' class='printFrame'></iframe>"
                + "<style type='text/css' media='all'>.printFrame { position: absolute; top: -9999999px; left: -99999999px; }</style>"
                + "<style type='text/css' media='print'>.do_not_print_this { display: none; } .printFrame { top: 0; left: 0; }</style>";
    $( 'body' ).html( $newBody );

    $( '.printFrame' ).load( function() {
        var w = ( this.contentWindow || this.contentDocument.defaultView );
        w.focus();
        w.print();
    } );
}

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

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

0 голосов
/ 09 мая 2017

Вот функция, которая работает на кросс-платформенных платформах в вечнозеленых браузерах и в текущих версиях iOS: 

function printElement(divid, title)
{   
  var contents = document.getElementById(divid).innerHTML;
  var frame1 = document.createElement('iframe');
  frame1.name = "frame1";
  frame1.style.position = "absolute";
  frame1.style.top = "-1000000px";
  document.body.appendChild(frame1);
  var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
  frameDoc.document.open();
  frameDoc.document.write('<html><head><title>' + title + '</title>');
  frameDoc.document.write('</head><body style="font-family: Arial, Helvetica, sans; font-size: 14px; line-height: 20px">');
  frameDoc.document.write('<h1>' + title + '</h1>');
  frameDoc.document.write(contents);
  frameDoc.document.write('</body></html>');
  frameDoc.document.close();

  setTimeout(function () {
    window.frames["frame1"].focus();
    window.frames["frame1"].print();
  }, 500);

  //Remove the iframe after a delay of 1.5 seconds
  //(the delay is required for this to work on iPads)
  setTimeout(function () {
     document.body.removeChild(frame1);
  }, 1500);
  return false;
}

Это основано на этом ответе с небольшими изменениями (важно отметить строкуdocument.body.removeChild(frame1); пришлось удалить, чтобы можно было печатать на iOS.)

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

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

...