1

グラフ以外のすべてにうまく機能するように見える ExtJS オブジェクトの印刷ソリューションがあります。

CSS ヒントを使用@media printして、ビューポートの下に「印刷」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レイアウトが発生している間 (約 1 秒) 表示され、呼び出した直後に非表示になりますdocument.printが、明らかに透過的ではありません。

@EvanTrimboli これは、他の質問で処理しようとしていた根本的な問題です。

4

2 に答える 2

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 に答える
1

あなたが観察したことは、チャートの最適化です。無効にできると思いますが、現在コードスニペットはありません。グラフが表示されている間に、印刷に適したページの準備を試みることができます。

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

チャートを画像に変換するには、生成された画像を背景またはimgタグのソースとして指定します。VML 形式のため、IE で動作するかどうかはわかりません。

于 2012-07-24T18:24:20.653 に答える