AngularJs v1.6.6，使用Lodop打印页面嵌入ECharts图表

最新推荐文章于 2025-07-09 15:39:07 发布

原创

最新推荐文章于 2025-07-09 15:39:07 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #lodop #echarts #angularjs

需求背景

因为需求的需要，需要在打印页面将一个折线图嵌入。
数据绑定使用：AngularJs
打印插件：Lodop
折线图渲染：ECharts

参考文档

1、Lodop官网
2、ECharts文档

解决思路

1、将图表生成图片文件，然后将图片输入lodop插件中。

参考：
1、ECharts绘制的图形保存为图片
2、Lodop演示用BASE64编码输出图片

2、将HTML传入Lodop插件中，使用Lodop自身IE引擎渲染

参考：
1、Lodop演示如何打印当前页面的内容
2、来自论坛图片

*思路总结：使用图片的难点是由于生成图片分辨率是否合适于打印机需要调试，这样会造成打印时因为打印机的不同，使得打印出来的图片不够清晰和模糊。所以在这里使用第二解决思路。

处理流程

1、使用AngularJs获取Ajax需要打印的数据，将数据渲染到打印预览页面，以及将数据写入HTML标签中（因为需要传入Lodop插件，只是渲染页面部分数据，所以需要这样的将数据放在标签中）。
2、循环获取需要渲染的数据。（因为需要预览页面，不需要渲染预览页面的可以不使用）
3、筛选ECharts需要的X轴和Y轴数据。
4、渲染ECharts图表。（记得将动画去掉，不去掉的话会造成需要动画展示的部分不展示）
5、将HTML数据获取并传入Lodop插件中，渲染图表（因为传入的数据包含有AngularJs获取的数据，所以在插件中执行的是步骤2、3、4）

程序代码

需要传入的HTML代码

<div class="col-xs-12 col-md-12" id="TemReport">
                <div id="main" style="height: 100%;width: 100%; min-height: 60.85mm;min-width: 185.21mm;"></div>
                <div id="mainData" style="display: none;">{
  
  {PringDataTem}}</div>
                <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
                <script type="text/javascript">
                var item=