iframe 上的嵌入式媒体放大 windows.print()

Question

我的网站上有一个嵌入式媒体，在代码上看起来像这样。我使用了 bootstrap 的嵌入响应组件来根据屏幕大小自动调整媒体大小。它看起来很棒并且在浏览器上运行良好，但是当我使用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 对屏幕尺寸变化的响应能力。尽管如此，这是我关于打印问题的临时解决方案。