javascript - 在 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;

这是我的图表在 IE 11 中打印预览的样子。

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，以确保完成所有摘要周期并且浏览器有时间绘制图表.

不漂亮，但是有效。