使用 window.print() 时，iframe 内容被剪切答案

【问题标题】：Iframe content is getting cut when using window.print()使用 window.print() 时，iframe 内容被剪切
【发布时间】：2017-05-26 10:08:54
【问题描述】：

我正在使用 javascript window.print() 打开浏览器打印。但是，当打开打印视图时，图表（在 iframe 中）被剪掉了。我尝试了一些解决方案，但对我没有任何作用。

按钮点击

<a href="javascript:window.print();" class="tooltips mr15" title="Print Report">
    <div class="icon-print-lrg"></div>
</a>

iframe html

<iframe id="kibana_url" src="{{reportsvm.kibanaUrl}}" style="min-height:600px; width:100%;" frameBorder="0"></iframe>

CSS 类

@media print
{  
    .noPrint, .noPrint *
    {
        display: none !important;
    }   
}

我在 css zoom:200% 中添加了因为当浏览器处于 200% 时一切都很好，但这对我不起作用。

@media print
{ 
   iframe 
   {
    zoom: 200%;
   }
  .noPrint, .noPrint *
  {
  display: none !important;
  }        
}

实际外观：

打印外观：

【问题讨论】：

【解决方案1】：

你试过JQuery的打印功能吗？我还认为在@media print 中，如果您将缩放比例降低到 75% 左右，您将获得整个区域。我也发现了这个link 这里。

【讨论】：