0

我的网站上有一个嵌入式媒体，在代码上看起来像这样。我使用了 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>

这是它在浏览器上的样子： 网站上的嵌入式媒体

但是当我单击打印按钮时，打印预览会显示： pdf上的嵌入媒体

如您所见，即使嵌入式媒体在浏览器上看起来不错，它似乎也被放大了。我什至尝试手动设置 iframe 的高度和宽度（例如width="" height=""），但媒体只是在打印时被切断。我还了解到，根据 iframe 的调整大小，被截断的内容也会发生变化。因此，当我最小化浏览器并单击打印按钮时，嵌入的视觉效果突然适合打印预览！我只希望我的嵌入式媒体适合打印页面而不是被切断。

4

1 回答 1

0

我没有使用引导响应组件，而是将代码更改为：

<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 对屏幕尺寸变化的响应能力。尽管如此，这是我关于打印问题的临时解决方案。

于 2017-02-05T12:41:16.990 回答