在 Angular-nvD3 渲染的 Internet Explorer 中打印图表答案

【问题标题】：Printing Charts in Internet Explorer Rendered By Angular-nvD3在 Angular-nvD3 渲染的 Internet Explorer 中打印图表
【发布时间】：2018-01-09 21:35:00
【问题描述】：

我正在使用 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 中的打印预览效果。

【问题讨论】：

标签： javascript twitter-bootstrap-3 nvd3.js angular-nvd3

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

不漂亮，但有效。

【讨论】：