Highchart已集成到angularjs
指令中。该指令仅打印元素的内容。以下是指令代码。从Here
// if there is no printing section, create one
if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
function link(scope, element, attrs) {
element.on('click', function () {
var elemToPrint = document.getElementById(attrs.printElementId);
if (elemToPrint) {
printElement(elemToPrint);
// tried to resize chart wich chart.setSize() and it works here
window.print();
}
});
window.onafterprint = function () {
// clean the print section before adding new content
// when I tried to resize the chart back to normal size, it doesn't work
}
}
function printElement(elem) {
// clones the element you want to print
var domClone = elem.cloneNode(true);
printSection.appendChild(domClone);
}
return {
link: link,
restrict: 'A'
};
以下是正在使用的CSS:
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
除了图表外,所有内容都在页面上正确打印。图表正在逐渐减少。据我所知,高图响应但在打印布局中无法正常工作。
在window.onafterprint
中,图表的大小调整仅适用于第一次。在随后的打印调用中,新的图表元素将添加到dom。
我在这里缺少什么?我是否需要调整图表大小或重绘?在哪里调整大小或重绘它?我是否需要将css
应用于高图元素?