встроенный медиафайл в iframe масштабируется в windows.print()

У меня есть встроенный носитель на моем веб-сайте, который выглядит так в коде. Я использовал встроенный компонент начальной загрузки для автоматического изменения размера носителя в зависимости от размера экрана. Он отлично выглядит и хорошо работает в браузере, но затем, когда я использую window.print(), медиафайл увеличивается, а его части обрезаются.

<div id="powerbi-include" class="embed-responsive embed-responsive-16by9">
    <iframe id="iframePrint" class="embed-responsive-item" src="..." frameborder="0" allowfullscreen="true">
    </iframe>
</div>

Вот как это выглядит в браузере: встроенный медиафайл на веб-сайте

Но когда я нажимаю кнопку печати, предварительный просмотр печати показывает следующее: встроенный медиафайл в формате pdf

Как видите, кажется, что встроенный носитель увеличивается, даже если в браузере он выглядит нормально. Я даже пытался установить высоту и ширину iframe вручную (например, width="" height=""), но носитель просто обрезается при печати. Я также узнал, что в зависимости от изменения размера iframe меняется и то, что обрезается. Поэтому, когда я сворачиваю браузер и нажимаю кнопку печати, встроенные визуальные эффекты внезапно помещаются в окно предварительного просмотра! Я просто хочу, чтобы мои встроенные носители помещались на печатной странице и не обрезались.


javascript iframe embed powerbi-embedded printing
person Marielle    schedule 05.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо того, чтобы использовать компонент, реагирующий на загрузку, я изменил код на это:

<div id="powerbi-include" style="zoom: 3.55">
    <iframe  id="iframePrint" src="..." frameborder="0" allowfullscreen="true">
    </iframe>
</div>

на моем print.css я добавил этот блок кода:

@media print {
    #powerbi-include {
        -moz-transform: scale(0.70, 0.70); 
        -webkit-transform: scale(0.70, 0.70); 
        -o-transform: scale(0.70, 0.70);
        -ms-transform: scale(0.70, 0.70);
        transform: scale(0.70, 0.70); 
        -moz-transform-origin: top left;
        -webkit-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
    }
}

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

person Marielle    schedule 05.02.2017
comment
Эй, это решение не сработало для меня, может быть, у вас есть что-то лучше? - person Eray Balkanli; 08.03.2019