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

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

2 голосов
/ 20 апреля 2020

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Вы можете использовать некоторые 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: 100vw;
        height: 100%;
        z-index: 10000;
    }
}

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

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

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

0 голосов
/ 03 мая 2020

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

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

...