Vue项目里的页面打印

功能描述，在项目里有个打印功能，将页面的部分内容打印出来。
如图描述只打印画圈的部分
（内容未展开）

实际打印效果：

如果直接用 window.print();只能打印一屏的内容，内容不能分页；所以只能操作节点

具体代码：

//打印方法
dayin(){
let dataReportBox =  document.getElementById('dataReportBox');//获取要打印内容的节点
//取不显示的节点，可以将他隐藏或者移除该节点
let top = document.getElementsByClassName('top')[0];
dataReportBox.removeChild(top);

//创建自己需要的节点
let topdiv = `<div class="topdiv"><span class="title">防火单位智慧消防数据综合报告</span><span class="time">${this.infos.beginDate}至${this.infos.endDate}</span></div>`;
$('#dataReportBox').prepend(topdiv); //将新创建的div节点插入到dataReportBox容器的内容顶部

let printHtml = document.getElementById('dataReportBox').innerHTML//获取到要打印的节点内容
window.document.body.innerHTML = printHtml;//把打印内容赋值给页面内容

window.print();//调用打印方法
window.location.reload();//打印之后页面重新加载
  }

注意：打印出来的样式和页面样式不同，没有保留页面的样式。

//注意这样重新编辑排版了的打印页面，原来的css不会显示的
//这个是在style里可以编辑打印时候的样式
@media print{
	
}

附加：
如果内容里存在canvas 是不能打印出来的，需要将canvas转换为image
实现：
获取到相对应的canvas节点然后转换为image对象

 print(){
          let diaBody =  document.getElementById('diaBody');
          let top = document.getElementsByClassName('top')[0];
            
          diaBody.removeChild(top);//删除节点

         
          let nodeArr = [];//存放节点

          $('.echarts').each(function (letter, rows) { //将canvas节点转换为image对象
            let  image = new Image();
            let canvasnode  = rows.children[0].children[0]
            image.width = 800;
            image.src = canvasnode.toDataURL("image/png");
            nodeArr.push(image)
          })
         
          $('.echarts').each(function (letter, rows) { //删除之前的canvas节点
            let children = rows.children[0];
            rows.removeChild(children);//移除canvas节点
          })
          $('.echarts').each(function (letter, rows) { //将canvas节点转换为image对象拼接在节点里
              rows.appendChild(nodeArr[letter])
          })
          let printHtml = document.getElementById('diaBody').innerHTML
          window.document.body.innerHTML = printHtml;
          setTimeout(()=>{
            window.print();
            window.location.reload();
          })
          
      }