Question

我有一个ExtJS对象的打印解决方案，除了图表之外，它似乎非常适用于所有内容。

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

我是这样做的，这样我就可以控制对象的比例大小，以便它很好地适应页面，这样我就可以删除像工具栏这样的“非打印”元素。当我想从我的应用程序打印ExtJS对象时，我将其添加到此“打印”div，然后调用document.print。

div的CSS看起来像这样：

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

这对网格和表单以及其他ExtJS对象一直很好。

现在我必须将其设置为打印一些图表，但每当我将图表添加到我的打印机div时，我都会收到“布局运行失败”错误 - 图表根本没有创建。我很确定这是因为屏幕上实际上没有看到打印机div，而且图表根据它的显示方式自行排列。

其他元素（如网格和表单）似乎并不关心它们是否在屏幕上可见以进行布局，所以我想知道有没有办法覆盖图表对象的这个要求？或者这是不可避免地埋在图表代码中？这对我来说是理想的处理方式，因为我不需要改变我的打印机制。

有人知道这是否可行？

我可以在比例大小的Ext.window.Window对象内创建图表的可打印版本，而不是我的printer类。它会在布局发生时显示（大约一秒钟），然后在我调用document.print之后立即隐藏，但显然不是那么透明。

@EvanTrimboli这是我试图用that other question处理的根本问题。

Answer 1

你观察到的是 - 图表中的优化，我认为它可以被禁用，但现在没有代码片段。您可以尝试在图表可见时准备好打印页面，使用

var img = chart.save({
     type: 'image/svg+xml'
});

将图表转换为图像，然后将生成的图像指定为img标记的背景或来源。由于VML格式，不确定它是否适用于IE。

Answer 2

我最终将图表配置放在浮动面板中。然后我展示了面板并立即在视口下面zIndexed。像这样（其中content是图表）：

// 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图表

2 个答案: