使用@media打印打印ExtJS图表 [英] Printing ExtJS charts with @media print

问题描述

我有一个ExtJS对象的打印解决方案，似乎除了图表以外的所有其他工作。

I have a printing solution for ExtJS objects that seems to work great for everything except for charts.

我一直在使用 @media print CSS提示在我的视口下创建一个打印div（因此它不会在屏幕上显示，但它是用户单击打印按钮时打印的唯一项目）。

I've been using @media print CSS tip to create a "printing" div below my viewport (so it is not seen on screen, but it is the only item that is printed when a user clicks the print button).

我这样做，以便我可以控制对象的比例尺寸，使其适合页面上，以便我可以删除非打印元素工具栏。当我想从我的应用程序打印一个ExtJS对象，我添加到这个打印div，然后调用 document.print 。

I do this so that I can control the proportionate sizing of the object so that it fits on the page nicely and so that I can remove "non-printing" elements like toolbars. When I want to print an ExtJS object from my app I add it to this "printing" div and then call document.print.

div的CSS看起来像这样：

The CSS for the div looks like this:

@media print {
    @page {size: landscape}
    body * {
      visibility: hidden;
    }
    .printer, .printer * {
      visibility: visible;
    }
    .printer {
      overflow: visible;
      position: absolute;
      left: 0;
      top: 0;
    }
}

这对网格和表单及其他ExtJS对象。

This has been working fine for grids and forms and other ExtJS objects.

现在，我必须设置它打印一些图表，但是我得到一个布局运行失败错误，每当我添加到我的打印机图表 - 图表不得到创建。我很确定这是因为打印机div实际上不是在屏幕上看到，并且图表根据它是如何看待自己。

Now I have to set it up to print some charts but I get a "Layout run failure" error whenever I add the charts to my printer div - the chart does not get created at all. I am pretty sure that this is because the printer div is not actually seen on the screen, and the chart lays itself out based on how it is seen.

其他元素像网格和窗体）似乎不在乎，如果他们是可见的在屏幕上做一个布局，所以我想知道有没有办法重写这个图表对象的要求？或者这是不可避免地埋在图表代码？这将是我理想的处理，因为我不必改变我的打印机制。

Other elements (like grids and forms) do not seem to care if they are visible on the screen to do a layout, so I was wondering is there any way to override this requirement for a chart object? Or is this inextricably buried in the chart code? It would be the ideal handling for me because I would not have to change around my printing mechanism.

有谁知道这是否可能？

我可以创建比例尺寸小于 Ext.window.Window 的图表的可打印版本，而且还有我的 printer 类。当我调用 document.print 后，布局发生（大约一秒钟）然后隐藏，但显然不是透明的。

I could create the printable versions of charts inside of a proportionately sized Ext.window.Window object instead that also has my printer class. It would be visible while the layout occurs (about a second) and then get hidden right after I call document.print but obviously that isn't as transparent.

@EvanTrimboli这是我试图处理的根问题其他问题。

@EvanTrimboli this is the root problem I was trying to handle with that other question.

推荐答案

我最终把图表配置放在一个浮动面板。然后我显示面板，立即zIndexed它在视口下。像这样（ content 是图表）：

I ended up putting the chart config in a floating panel. Then I showed the panel and immediately zIndexed it underneath the viewport. Like this (where content is the chart):

// create the printer panel
printable = Ext.create('Ext.panel.Panel', {
    cls: 'printer',
    border: false,
    header: false,
    shadow: false,
    floating: true,
    height: content.length * 670,
    width: 900,
    items: content,
}).show();

// stash the panel where it wont be seen
printable.setPosition(0, 0);
printable.el.dom.style.zIndex = -50;

这篇关于使用@media打印打印ExtJS图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！