Как открыть диалоговое окно предварительного просмотра при печати iframe в Firefox?

В отличие от почти любого другого основного браузера, в Firefox window.print открывает диалоговое окно печати вместо диалогового окна предварительного просмотра. Эта проблема была признана разработчиками Firefox давным-давно. «исправить» это, они решили реализовать другую, предназначенную только для Firefox функцию browser.tabs.printPreview, который открывает диалоговое окно предварительного просмотра для текущей активной вкладки.

Я печатаю скрытый iframe и в идеале хочу отображать диалоговое окно предварительного просмотра, а не диалоговое окно печати. Мне достаточно легко обнаружить browser.tabs.printPreview, однако я не смог найти способ заставить его действовать на iframe вместо текущей вкладки.

Есть ли способ открыть диалоговое окно предварительного просмотра для iframe в Firefox, используя browser.tabs.printPreview или какой-либо другой метод?

Уточнение: это для библиотеки React, которую я поддерживаю, react-to-print, которая обертывает JSX пользователя с нашим компонентом. За исключением того, что упаковано компонентом (контент, который пользователь хочет распечатать), у меня нет никакого контроля над контентом на странице.


person Matthew Herbst    schedule 19.04.2020    source источник


Ответы (2)


Вы захотите использовать CSS, чтобы изменить стиль iframe только для печати.

@media print { 
    iframe { /* Use your own selector here if you need more specificity. */
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        z-index: 10000;
    }
}

медиа-запросы CSS изменяют отображение веб-страниц на разных устройствах. Вы можете написать CSS специально для браузеров с @media screen и CSS специально для печати с @media print

CSS предполагает, что у вас нет других абсолютных элементов, плавающих над z-index: 10000, и что iframe не находится внутри элемента с position: relative. Если это так, вам нужно будет сделать еще несколько стилей, чтобы убедиться, что элемент плавает над остальной частью страницы при печати.

Этот фрагмент CSS гарантирует, что в предварительном просмотре печати будет отображаться только ваш iframe, и он похож на метод, который я сейчас использую в производстве (также и в Firefox).

person Joundill    schedule 07.05.2020
comment
Вы должны установить размер iframe в соответствии с размером его содержимого, а не 100vh. - person David Bradshaw; 08.05.2020
comment
Да, верно. Хотя зависит от остальной части страницы. Если мы это сделаем, из-под него могут вылезти другие элементы. - person Joundill; 08.05.2020
comment
Спасибо, однако, как упоминалось выше и ниже, у меня нет никакого контроля над тем, какие другие элементы пользователь имеет на странице. - person Matthew Herbst; 08.05.2020
comment
@MatthewHerbst Вы можете запустить javascript? Если это так, вы можете переместить iframe в прямой дочерний элемент тега body. - person Joundill; 09.05.2020
comment
Да, я создаю, а затем уничтожаю iframe с помощью JavaScript. - person Matthew Herbst; 09.05.2020
comment
Затем вы просто присоединяете iframe как элемент непосредственно к тегу body, и это решение работает. - person Joundill; 09.05.2020

Не то, чтобы я знал об этом, но вы можете использовать @media print в своем css, чтобы показать iframe и скрыть все остальное на странице. Если содержимое iframe не имеет фиксированного размера, вы можете использовать мою библиотеку под названием iframe-resizer чтобы решить эту проблему.

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

person David Bradshaw    schedule 03.05.2020
comment
Спасибо за уделенное время. Я должен был указать, что я не контролирую контент, который находится на странице, а только ту часть, которую поддерживает библиотека, которую я поддерживаю, поэтому я не могу скрыть содержимое страницы так, как вы предлагаете. Таким образом, это не отвечает на вопрос. - person Matthew Herbst; 04.05.2020
comment
Тогда спасибо за отрицательный голос. Почему бы вашей библиотеке просто не внедрить CSS на страницу, чтобы сделать это? - person David Bradshaw; 04.05.2020
comment
Потому что пользователь увидит вспышку изменения контента, чего нам не следует хотеть. Опять же, печать из iframe. Ответ на этот вопрос должен касаться того, как открыть диалоговое окно предварительного просмотра печати iframe в Firefox. - person Matthew Herbst; 06.05.2020
comment
Эм, нет, они не увидят вспышку, так как содержимое не изменится в браузере, правило css @media print будет интерпретироваться только дисплеем предварительного просмотра, а не браузером. Я не думаю, что то, о чем вы просите, существует, попробуйте это, это даст вам пользовательский опыт, который вам нужен. - person David Bradshaw; 06.05.2020