Iframe разрезает снизу при печати в IE

В IE11, печатающем страницу ниже, вырезает iframe внизу, а не позволяя ему перейти на следующую страницу. Как я могу предотвратить это и заставить его печатать все?

Примечание. Чтобы воспроизвести эту проблему, просто вставьте код в блокнот и откройте его в IE

<html >
    <head>
        <style>
        .myiframe{
            width:100%;
            height:6000px;
        }
        </style>

    </head>
    <body>

        <div>
            <a href="javascript:print()" ><h1>Print</h1></a>
        </div>

        <iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"/>

        <div>
            The rest of the page
        </div>

    </body>
</html>

На хром он отлично работает. содержимое iframe расширяется и все печатаются

введите описание изображения здесь

Ответы

Ответ 1

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

Посмотрите на решение 4. Это похоже на то, что вы хотите достичь. (С рабочим примером)

Решение 1: Я думаю, что у меня есть решение, которое не идеально, но может сделать эту работу.

Перед печатью вы заменяете iframe изображением iframe. Я нашел эту библиотеку под названием iframe2image: https://github.com/twolfson/iframe2image.

Чтобы поймать событие печати, вы можете использовать ответ на этот вопрос: fooobar.com/questions/296329/...

У меня не было возможности проверить это, но я думаю, вы могли бы что-то сделать с этим.

ИЗМЕНИТЬ

Решение 2: Вот еще одно мнение, которое может сработать. Вы можете использовать этот Html to PDF api, чтобы сначала преобразовать содержимое iframe в pdf. Затем включите этот pdf, где iframe был (например, с помощью PDF.js) и распечатайте страницу.

Вот еще один api: http://www.convertapi.com/web-pdf-api

ИЗМЕНИТЬ 2:

Решение 3 (рабочий пример): Я только что нашел этот веб-сайт, который позволяет вставлять кнопку Save page to PDF, которая вернет pdf-версию страницы, на которой пользователь включен. Вы можете заменить кнопку печати на своей странице этой кнопкой и сообщить пользователю распечатать созданный pdf.

Рабочий пример

Единственная проблема заключается в том, что пользователь отправляется на другой веб-сайт для загрузки файла. Я думаю, вы можете получить прямую ссылку на файл pdf при оплате основного членства (5 $/месяц). Там могут быть подобные услуги, предлагающие прямые ссылки бесплатно, которых я не нашел.

ИЗМЕНИТЬ 3:

Решение 4 (с рабочим примером):

Я только что нашел веб-сайт, который дает прямую ссылку на сгенерированный PDF файл страницы. Дополнительная информация здесь: http://pdf-ace.com/save-as-pdf-button/

Рабочий пример (я заменил кнопку Print)

Ответ 2

iFrame продолжает просматривать страницу, как вы можете видеть.

Мне просто нужно было добавить элемент max-height и установить его как max-height: 100%;, что и позволило продолжить страницу.

У вас должно быть три существующих элемента стиля, два из которых вы уже писали.

Это:

width: 100%;
height: 6000px;
max-height: 100%;

У вашего body есть позиционирование absolute, я полагаю. Попробуйте создать и настроить свойство CSS height абсолютно позиционированного элемента (ов). Поскольку у меня нет разметки и/или CSS, я не могу сказать, что нужно установить height для какого элемента (ов). Скорее всего, это будет 100% или auto. Возможно даже комбинация обоих.

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

Как это написано для меня в настоящее время:

.myiframe {
  width: 100%;
  height: 6000px;
  max-height: 100%;
}
<div>
  <a href="javascript:print()">
    <h1>Print</h1>
  </a>
</div>

<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki" />

<div>
  The rest of the page
</div>