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

iframe上的嵌入式媒体放大了windows.print（）

1 个答案: