前端通过html2canvas打印echarts图表

最新推荐文章于 2024-07-22 15:30:16 发布

鲤鱼和龙虾

最新推荐文章于 2024-07-22 15:30:16 发布

阅读量4.1k

点赞数

分类专栏： echarts插件文章标签：打印echarts

本文链接：https://blog.csdn.net/lxj7607/article/details/100928938

版权

项目中遇到echarts图表无法通过window.print正常打印的问题，采用html2canvas将页面转为canvas，然后打印canvas内容。但在实际操作中发现会打印多余的内容。通过CSS的@media和JS动态修改样式，解决了打印时不必要的内容被打印的难题。

摘要由CSDN通过智能技术生成

项目上需要实现导出和打印html，本来直接调用的window.print，结果发现echarts图表无法打印，会是空白的，网上搜索了一下，都是采用转换为64位编码，感觉比较麻烦，找到了另一种办法，利用html2canvas直接将页面转换为canvas，再打印canvas就行了。

代码

// 打印日报
            $("#printall").on("click", function () {
                if (confirm("您确认打印该PDF文件吗?")) {
                    // 先用html2canvas将页面整个转为一张截图，再打印，防止出现echarts无法打印
                    html2canvas(document.getElementById('monthlyReport')).then(
                        function (canvas) {
                            window.print(canvas);  // 打印canvas
                        }
                    );
                }
            });

有个问题，尽管通过document.getElementById('monthlyReport')获取了对应的id,但是在打印时还是会打印当前页面的东西，有一部分不需要的东西也被打印了

如图：