需求背景

因為需求的需要，需要在列印頁面將一個折線圖嵌入。
資料繫結使用：AngularJs
列印外掛：Lodop
折線圖渲染：ECharts

參考文件

解決思路

1、將圖表生成圖片檔案，然後將圖片輸入lodop外掛中。

2、將HTML傳入Lodop外掛中，使用Lodop自身IE引擎渲染

*思路總結：使用圖片的難點是由於生成圖片解析度是否合適於印表機需要除錯，這樣會造成列印時因為印表機的不同，使得打印出來的圖片不夠清晰和模糊。所以在這裡使用第二解決思路。

處理流程

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=1;
                var index=0;
                var max=60;
                //當資料渲染完成獲取渲染資料
                function mian(){
                    if(checkData()){
                        doReport(getData());
                    }else
 
{
                        item=window.setInterval(forCheck,500)
                    }
                }
                //校驗並渲染報表
                function forCheck(){
                    if(checkData()){
                        doReport(getData());
                        window.clearInterval(item);
                    }else{
                        if(index>max){
                            console.log("等待資料超過"+(max/2)+"S！");
                        }
                        index++;
                        console.log(index+":"+item+",正在等待資料！");
                    }
                }
                //獲取資料
                function getData(){
                    var data =eval(document.getElementById('mainData').innerText);
                    var back=data;
                    return back;
                }
                //校驗資料是否更新
                function checkData(){
                    var data =document.getElementById('mainData').innerText;
                    if(data==='{{PringDataTem}}'||data===''){
                        return false
                    }
                    return true;
                }
                //獲取陣列資料
                function getArrayData(item,index){
                    var back=[];
                    for(var i=0;i<item.length;i++){
                        back[i]=item[i][index];
                    }
                    return back;
                }
                //渲染報表
                function doReport(data){

                    var myChart = echarts.init(document.getElementById('main'));

                    var dateList = getArrayData(data,0);
                    var valueList = getArrayData(data,1);

                    var option = {
                            color: ['#3FA7DC'],
                            title: {
                                subtext: '西門子1099溫度(℃)',
                                subtextStyle:{color:'#000'}
                            },
                            animation: false,//去掉動畫才會顯示線
                            tooltip: {
                                 trigger: 'axis',
                                 axisPointer: {
                                     type: 'cross'
                                 }
                            },
                            legend: {
                                data:['溫度(℃)']
                            },
                            xAxis: {
                                data: dateList                          
                            },
                            yAxis: {
                                axisLabel: {
                                    formatter: '{value} ℃'
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#3FA7DC"
                                    }
                                }
                            },
                            series: [{
                                name: '溫度(℃)',
                                type: 'line',
                                data: valueList
                            }]
                        };

                     myChart.setOption(option);
                }
                mian();
                </script>
            </div>

Lodop渲染程式碼

//詳細呼叫程式碼請參考Lodop官網
var repot="<body>"+document.getElementById('TemReport').innerHTML+"</body>";
//其他繪製程式碼略...
LODOP.ADD_PRINT_HTML("82.55mm","22.75mm","185.21mm","60.85mm",repot);//根據業務設定顯示的大小

AngularJs測試資料

        //圖表渲染資料
        $scope.PringDataTem=[["2000-06-05 \n15:30:45",116],["2000-06-06 \n15:30:45",129],
                             ["2000-06-07 \n15:30:45",135],["2000-06-08 \n15:30:45",86],
                             ["2000-06-09 \n15:30:45",73],["2000-06-10 \n15:30:45",85],
                             ["2000-06-11 \n15:30:45",73],["2000-06-12 \n15:30:45",68],
                             ["2000-06-13 \n15:30:45",92],["2000-06-14 \n15:30:45",130],
                             ["2000-06-15 \n15:30:45",245],["2000-06-16 \n15:30:45",139],
                             ["2000-06-17 \n15:30:45",115],["2000-06-18 \n15:30:45",111],
                             ["2000-06-19 \n15:30:45",309],["2000-06-20 \n15:30:45",206],
                             ["2000-06-21 \n15:30:45",137],["2000-06-22 \n15:30:45",128],
                             ["2000-06-23 \n15:30:45",85],["2000-06-24 \n15:30:45",94],
                             ["2000-06-25 \n15:30:45",71],["2000-06-26 \n15:30:45",106],
                             ["2000-06-27 \n15:30:45",84],["2000-06-28 \n15:30:45",93],
                             ["2000-06-29 \n15:30:45",85],["2000-06-30 \n15:30:45",73],
                             ["2000-07-01 \n15:30:45",83],["2000-07-02 \n15:30:45",125],
                             ["2000-07-03 \n15:30:45",107],["2000-07-04 \n15:30:45",82],
                             ["2000-07-05 \n15:30:45",44],["2000-07-06 \n15:30:45",72],
                             ["2000-07-07 \n15:30:45",106],["2000-07-08 \n15:30:45",107],
                             ["2000-07-09 \n15:30:45",66],["2000-07-10 \n15:30:45",91],
                             ["2000-07-11 \n15:30:45",92],["2000-07-12 \n15:30:45",113],
                             ["2000-07-13 \n15:30:45",107],["2000-07-14 \n15:30:45",131],
                             ["2000-07-15 \n15:30:45",111],["2000-07-16 \n15:30:45",64],
                             ["2000-07-17 \n15:30:45",69],["2000-07-18 \n15:30:45",88],
                             ["2000-07-19 \n15:30:45",77],["2000-07-20 \n15:30:45",83],
                             ["2000-07-21 \n15:30:45",111],["2000-07-22 \n15:30:45",57],
                             ["2000-07-23 \n15:30:45",55],["2000-07-24 \n15:30:45",60]];

測試結果

預覽頁面截圖

列印設計頁面截圖

總結

1、因為Lodop核心是ie核心，所以程式和樣式都需要適應ie瀏覽器。
2、渲染echarts時，將動畫遮蔽要不然在列印渲染時將不會顯示動畫部分。
3、有不懂的地方請加Lodop的QQ群，在Lodop官網可以找到。