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

Question

У меня есть встроенный носитель на моем веб-сайте, который похож на этот код. Я использовал компонент, зависящий от встраивания бутстрапа, для автоматического изменения размера носителя в зависимости от размера экрана. Он отлично смотрится и хорошо работает в браузере, но затем, когда я использую 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> 

Вот как это выглядит в браузере:

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

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

Answer 1

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

<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 на изменения размера экрана. Тем не менее, это временное решение моей проблемы с печатью.