Как принудительно установить для диаграмм ECharts фиксированную ширину при печати?

Я использую несколько электронных диаграмм в своем приложении Vue с vue-echarts. На всех диаграммах указано: autoresize = "true".

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

CSS: .echarts {ширина: 100%; минимальная высота: 200 пикселей; }

@media print {
@page { margin: 1cm }
  body {
    width: 110mm;
    height: 297mm;
    margin: 25mm 25mm 25mm 25mm;
  }
  .echarts {width: 600px !important;} /* This does not work! */
}

В сгенерированной модели DOM есть контейнер, а внутри него - другой div со стилем: position: relative; ширина: 567 пикселей; высота: 400 пикселей; отступ: 0 пикселей; маржа: 0px; ширина границы: 0 пикселей; курсор: указатель;

Ширина внутреннего контейнера обновляется при изменении размера браузера.


vue.js echarts
person tputkonen    schedule 09.01.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Да, я столкнулся с той же проблемой. Я также пробовал перед печатью и после функции печати и вызова перерисовать диаграмму, но иногда ее ломали, когда Браузер уменьшал и увеличивал масштаб.

Я говорю, что это не лучшее решение, но работает отлично.

Решение -

Перезаписать метод window.print в mounted.

window.print = function () {
                setTimeout(function () {
                    _print();
                }, 500);
            };

используйте флаг print_mode для печати.

        let self = this;
        window.addEventListener('afterprint', function () {
            self.print_mode = false;
        });

ссылка пользователя экземпляра диаграммы для получения base64 данных. вызовите getDataURL(), чтобы получить данные изображения.

chart = echarts.init(chart_dom);

chart_img = chart.getDataURL()


<img v-if="print_mode" class="print-only" :src="chart_img"></img>

поэтому при печати он отображает изображение и печатает, а в обычном режиме он показывает диаграмму.

person Patel Pratik    schedule 09.01.2020
comment
Если у вас есть другое решение, поделитесь. - person Patel Pratik; 10.01.2020
comment
Спасибо, наконец-то у меня появилось время опробовать это! Я добавил кнопку для рендеринга страницы для печати, создал электронные диаграммы за пределами экрана, а затем использовал getDataUrl. Я все еще думаю, можно ли вместо использования getDataUL () и растровых изображений использовать svg-версии диаграмм. Чтобы получить прилично выглядящие диаграммы, мне нужно сгенерировать их в масштабе 200%. - person tputkonen; 20.04.2020