1、準備好js檔案

<script src="~/javaScript/jquery.PrintArea.js"></script>

3.定義一個方法

 doPrint() {// 獲取echarts圖表
             var myChart1 = echarts.init(document.getElementById('myChart'));
             //myChart2.setOption(option3);
             // 獲取圖片（此時還未實現轉換暫時處於隱藏狀態）
 

             var img1 = document.getElementById('img_report');

             // 將圖表轉換成圖片，並儲存在圖片域當中
             img1.src = myChart1.getDataURL({
                 pixelRatio: 2,
                 backgroundColor: '#fff'
             });

             // 先把圖表隱藏，讓圖片先顯示出來
             document.getElementById('img_report').style.display="block";

             document.getElementById(
 
'myChart').style.display="none";

           
             $("#printContent").printArea();
            
             // 再將圖片隱藏，將動態echarts突變顯示出來
             document.getElementById('img_report').style.display="none";
             document.getElementById('myChart').style.display="block";
            }

4.HTML程式碼如下

            <div id='printContent' class="layui-card-body">
            　　<div id="myChart" style="width:100% !important; height: 400px;">
            　　</div>
            </div>
            <img src="" style="width:100% !important; height: 350px;display: none;" id="img_report" />

5.新增按鈕呼叫方法

 <button v-on:click="doPrint()" class="layui-btn layui-btn-sm">列印</button>