- 首页
- 前端开发
- 在 Angular-nvD3 渲染的 Internet Explorer 中打印图表
在 Angular-nvD3 渲染的 Internet Explorer 中打印图表
[英] Printing Charts in Internet Explorer Rendered By Angular-nvD3
本文介绍了在 Angular-nvD3 渲染的 Internet Explorer 中打印图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap v3.2.0 来布置使用 Angular-nvD3 创建的 3 个图形.我正在尝试渲染页面以进行打印.我在 @media 打印规则中有一些修改过的 CSS.一切都可以在 Chrome 中正确呈现以进行打印，但图表不会调整大小以在 IE 11 中打印.我尝试在 JavaScript 中触发窗口大小调整事件，它执行但没有任何区别.
我的 div 看起来像这样:
<div class="row"><div class="col-md-3 col-sm-3 col-xs-3"><div ng-controller="BusinessPieChartController"><h4>业务分配</h4><nvd3 options="options" data="data"></nvd3>
<div ng-controller="LocationTypePieChartController"><h4>位置类型</h4><nvd3 options="options" data="data"></nvd3>
<div class="col-md-9 col-sm-9 col-xs-9"><h4>随时间的增长</h4><div ng-controller="HistoryLineAreaGraphController"><nvd3 options="options" data="data"></nvd3>
这是我试图不占上风的 JavaScript 代码.
var printTriggered = false;var beforePrint = function () {如果(打印触发){返回}打印触发=真；设置超时(函数(){打印触发=假；}, 2000)变量事件if (typeof Event === '函数') {event = new Event('resize')} 别的 {event = document.createEvent('事件')event.initEvent('resize', true, true)}window.dispatchEvent(事件)};如果(window.matchMedia){var mediaQueryList = window.matchMedia('print');mediaQueryList.addListener(函数(MQL){如果(mql.matches){打印前()；}});}window.onbeforeprint = beforePrint;
以下是我的图表在 IE 11 中的打印预览效果.
解决方案
我分享了这个确切的问题，尽管只有一张图.最终为图表使用了重复的元素.
首先，绘制一个图形的宽度以匹配纸张大小，一旦完成，它就会隐藏起来，而显示另一个图形:
<nvd3 options="vm.graphOptions"data="vm.graphData"></nvd3>
<div class="隐藏打印"ng-if="vm.graphForPrintRendered"><nvd3 options="vm.graphOptions"data="vm.graphData"></nvd3>
和CSS
.graph-for-print {最大宽度:680px；}@媒体屏幕{.graph-for-print.rendered {溢出:隐藏；高度:0；}}
vm.graphForPrintRendered 在 $timeout 之后为 true 以确保所有摘要循环都完成并且浏览器有时间绘制图表.
不漂亮，但有效.
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.
解决方案
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.
这篇关于在 Angular-nvD3 渲染的 Internet Explorer 中打印图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
