1

我有一个 ExtJS 对象的打印解决方案，它似乎对除图表之外的所有东西都适用。

我一直在使用@media printCSS 提示在我的视口下方创建一个“打印”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 这是我试图处理其他问题的根本问题。

4

2 回答 2

1

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

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

将图表转换为图像，然后将生成的图像指定为img标签的背景或来源。由于 VML 格式，不确定它是否可以在 IE 中运行。

于 2012-07-24T18:24:20.653 回答
1

我最终将图表配置放在浮动面板中。然后我展示了面板并立即在视口下方对它进行了 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;
于 2012-07-24T18:49:27.680 回答