Печать диаграмм ExtJS с помощью @media print

У меня есть решение для печати объектов ExtJS, которое отлично подходит для всего, кроме диаграмм.

Я использовал @media print подсказку CSS для создания div для печати под моим окном просмотра (чтобы он не отображался на экране, но это единственный элемент, который печатается, когда пользователь нажимает кнопку печати).

Я делаю это для того, чтобы контролировать пропорциональные размеры объекта, чтобы он хорошо умещался на странице, и чтобы я мог удалить «непечатаемые» элементы, такие как панели инструментов. Когда я хочу напечатать объект ExtJS из своего приложения, я добавляю его в этот «печатный» div и затем вызываю document.print.

CSS для div выглядит так:

@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, это основная проблема, которую я пытался решить с помощью того другого вопроса .


charts extjs printing-web-page extjs4.1
person egerardus    schedule 18.07.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

То, что вы заметили, - это оптимизация графиков, я думаю, ее можно было бы отключить, но сейчас у меня нет фрагмента кода. Вы можете попытаться подготовить свою страницу для печати, пока диаграммы видны, используйте

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

чтобы преобразовать диаграмму в изображение, затем укажите сгенерированное изображение в качестве фона или источника тега img. Не уверен, будет ли он работать в IE из-за формата VML.

person Pavel Podlipensky    schedule 24.07.2012
comment
К сожалению, это для веб-приложения интрасети без внешнего доступа. chart.save в формат изображения требует передачи конфигурации на серверы Sencha, что я не могу сделать. Я закончил решать проблему с zIndexing, сейчас опубликую. - person egerardus; 24.07.2012

arrow_upward
1
arrow_downward

В итоге я разместил конфигурацию диаграммы на плавающей панели. Затем я показал панель и сразу же индексировал ее под окном просмотра. Вот так (где 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;
person egerardus    schedule 24.07.2012