vue打印echarts

思路
将整个body的内容替换为弹窗的内容,打印操作完成之后还原
echarts打印时未显示,通过将其转为img的方法进行打印

 //打印触发的方法
    print() {
      var that = this;
      var oldstr = document.body.innerHTML; // 获取当前页面内容用以还原
      var div_print = document.getElementById("printTest"); // 获取要打印部分的内容
      var cv = document.getElementsByTagName("canvas")[0]; //获取canvas
      var resImg = document.getElementsByClassName("resImg")[0]; //获取包裹canvas的标签
      // 将canvas转为图片
      var context = cv.getContext("2d");
      var img = new Image();
      var strDataURI = cv.toDataURL("image/png");
      img.src = strDataURI;
      // 图片加载完成之后
      img.onload = function() {
        // 执行打印
        console.log(img);
        setTimeout(function() {
          resImg.innerHTML = `<img src="${strDataURI}">`; // 用图片替代canvas
          var newstr = div_print.innerHTML;
          document.body.innerHTML = newstr; // 将页面内容改为修改后的内容
          window.print(); // 打印
          window.location.reload(); // 重新加载页面
          document.body.innerHTML = oldstr; // 将页面内容还原
        }, 1000);
      };
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章