Printing Charts in Internet Explorer Rendered By Angular-nvD3

筅森魡賤 提交于 2019-12-12 23:28:29

问题


I am using Bootstrap v3.2.0 for laying out 3 graphs created using Angular-nvD3. I am trying to render the page for printing. I have some modified CSS in the @media print rule. Everything renders properly for printing in Chrome, but the charts do not resize for printing in IE 11. I have tried to trigger a window resize event in JavaScript, it executes but doesn't make any difference.

My div looks like this:

<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>

Here is the JavaScript code I tried to no prevail.

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;

Here is how my graphs look from print preview in IE 11.


回答1:


I shared this exact problem, although with just one graph. Ended up using duplicate elements for the graph.

First, one graph is rendered with width to match the paper size, and, once that's done, it's hidden, and another graph is shown instead:

<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>

and the css

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

vm.graphForPrintRendered is true after a $timeout to ensure all digest cycles are done and the browser has had time to draw the chart.

Not pretty, but works.



来源:https://stackoverflow.com/questions/48176988/printing-charts-in-internet-explorer-rendered-by-angular-nvd3

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!