在Internet Explorer中打印由Angular-nvD3呈现的图表

Question

我正在使用Bootstrap v3.2.0来布置使用Angular-nvD3创建的3个图表。我正在尝试渲染页面以进行打印。我在@media打印规则中修改了一些CSS。在Chrome中，一切都可以正常呈现，但在IE 11中，图表无法调整打印大小。我尝试在JavaScript中触发窗口大小调整事件，它会执行，但没有任何区别。

我的div看起来像这样：

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3">
            <div ng-controller="BusinessPieChartController">
                <h4>Business Allotment</h4>
                <nvd3 options="options" data="data"></nvd3>
            </div>
            <div ng-controller="LocationTypePieChartController">
                <h4>Location Types</h4>
                <nvd3 options="options" data="data"></nvd3>
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-9">
            <h4>Growth Over Time</h4>
            <div ng-controller="HistoryLineAreaGraphController">
                <nvd3 options="options" data="data"></nvd3>
            </div>
        </div>
    </div>
</div>

以下是我试图阻止的JavaScript代码。

var printTriggered = false;

var beforePrint = function () {
    if (printTriggered) {
        return
    }

    printTriggered = true;

    setTimeout(function () {
        printTriggered = false;    
    }, 2000)

    var event
    if (typeof Event === 'function') {
        event = new Event('resize')
    } else {
        event = document.createEvent('Event')
        event.initEvent('resize', true, true)
    }
    window.dispatchEvent(event)
};

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
        if (mql.matches) {
            beforePrint();
        } 
    });
}

window.onbeforeprint = beforePrint;

这是我的图形在IE11的打印预览中的外观。

​

Answer 1

我分享了这个确切的问题，尽管只有一个图表。最终为图形使用了重复的元素。

首先，呈现一个宽度与纸张大小相匹配的图表，一旦完成，它将被隐藏，而另一个图表将显示出来：

<div class="graph-for-print"
     ng-class="{rendered: vm.graphForPrintRendered}">
  <nvd3 options="vm.graphOptions"
        data="vm.graphData"></nvd3>
</div>
<div class="hidden-print"
     ng-if="vm.graphForPrintRendered">
  <nvd3 options="vm.graphOptions"
        data="vm.graphData"></nvd3>
</div>

和css

.graph-for-print {
  max-width: 680px;
}
@media screen {
  .graph-for-print.rendered {
    overflow: hidden;
    height: 0;
  }
}

vm.graphForPrintRendered在$timeout之后执行true，以确保所有摘要周期都已完成，并且浏览器有时间绘制图表。

不是很漂亮，但很管用。