如何在打印时强制ECharts图表为固定宽度？
如何在打印时强制ECharts图表为固定宽度？
提问于 2020-01-09 16:30:39
我在我的Vue应用程序中使用了一些echarts和vue-echarts。所有图表的:autoresize=都为“true”。
我的问题是，如果我尝试打印页面，图表的宽度被设置为与浏览器的宽度相匹配。如果浏览器是全屏的，那么一些图表会被裁剪。
CSS：.echarts {宽度: 100%；最小高度: 200px；}
@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；width: 567px；height: 400px；padding: 0px；width: 0px；border-width: 0px；cursor: pointer；
当浏览器调整大小时，内部容器的宽度会更新。
回答 1
Stack Overflow用户
发布于 2020-01-09 16:49:02
是的，我也遇到过同样的问题。我也试过在打印之前和打印后调用函数来重新绘制图表，但有时在Brower进行缩小和放大时会中断。
我说这不是最好的解决方案，但它工作得很好。
解决方案-
覆盖mounted中的window.print方法。
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>因此，当打印它时，它显示图像和打印，在正常模式下，它显示一个图表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59659870
复制相关文章
相似问题
腾讯云开发者
