Vue项目里的页面打印

绝地灬酷狼 2023-07-25 12:53 58阅读 0赞

功能描述，在项目里有个打印功能，将页面的部分内容打印出来。  
如图描述只打印画圈的部分  
（内容未展开）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]  
实际打印效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]

**如果直接用 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();//打印之后页面重新加载
      }

注意：打印出来的样式和页面样式不同，没有保留页面的样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]

//注意这样重新编辑排版了的打印页面，原来的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();
              })
              
          }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20230528/eae606eba6f24eb3a3e720325ac949d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/e2d7833c63f8485dafa8b57ea23e0960.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/ecc7464e23284415a68bd6ccbc8dead0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]: /images/20230528/84c17a4fe34d431bb41040c534908603.png