print 页面打印

网上有插件   这是没用插件的写法

      <div id="echartPdf" v-if="isShow">
        <div v-for="(item, index) in dataList" :key="index" class="pdfdiv">
          <div v-for="(v,i) in item" :key="i">
             
            <con-echaet :dataObj="v" :colorIndex="index*4+i" class="echart"></con-echaet>
          </div>
        </div>
      </div>

        <!-- zoom:50% 这是设置打印时的缩放 -->
      <!-- pageBreakAfter:auto   是设置自动分页 -->
        <!-- 外部盒子不能有overflow：hidden -->
      <div id="echartPrint">
        <div v-for="(item,index) in chartUrlBaseUrlArr" style="pageBreakAfter:auto">
          <img :src="chartUrlBaseUrlArr[index]" style="zoom:50%" />
        </div>
      </div>

//添加一个方法

 async Print() {
    let bdhtml = window.document.body.innerHTML;

    const echartCanvasList = document.querySelectorAll(".echart");
    console.log("几个图形", echartCanvasList);
    this.chartUrlBaseUrlArr = [];
    for (let i = 0; i < echartCanvasList.length; i++) {
      // 将第一个画布作为基准
      var baseCanvas = echartCanvasList[i].getElementsByTagName("canvas")[0];
      // 删除原本echarts图表盒子
      // echartCanvasList[i].remove();
      // 获取base64位的url 放入数组中
      this.chartUrlBaseUrlArr.push(baseCanvas.toDataURL());
    }
    //如果想要打印完后页面和原来一样 需要将数据存储在本地    print也有方法保存   但是不完善
    //localStorage.setItem("dataList", JSON.stringify(this.dataList));


    setTimeout(() => {
      var jubuData = document.querySelector("#echartPrint").innerHTML;
      // //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
      window.document.body.innerHTML = jubuData;
      var style = document.createElement("style");
      //  纵向: portrait  横向：landscape
      style.innerHTML = "@page{size: portrait}";
      window.document.head.appendChild(style);
      // //调用打印功能
      window.print();
      // window.document.body.innerHTML = bdhtml; //重新给页面内容赋值；
      window.location.reload();
    }, 200);
  }