使用@media print 打印 ExtJS 图表

Posted 2023-02-26

【中文标题】使用@media print 打印 ExtJS 图表

【英文标题】：Printing ExtJS charts with @media print

【发布时间】：2012-07-18 16:15:46

【问题描述】：

我有一个 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 处理的根本问题。

【参考方案1】：

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

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

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

【讨论】：

不幸的是，这是针对没有外部访问权限的 Intranet webapp。 chart.save 到图像格式需要将配置传递给我无法做到的 sencha 服务器。我已经结束了 zIndexing 问题的处理，我稍后会发布。

【参考方案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;