打印html区域和下载html区域内容

首先说下html的下载方法

可能我们用的就是window.print()方法，然后window.reload(),这样的话体验不是很好，经常要重新刷新页面
那么分情况去处理就是比较合适的方法啦
首先以webkit为内核的浏览器中

let printStyle=this.getStyle()
setTimeout(()=>{
   let printContent=$(that.$refs.downArea).html()  // 当前下载区域
   let iframe = document.createElement('IFRAME'); // 设置需要下载的iframe节点
   document.body.appendChild(iframe);
   iframe.contentDocument.write(printStyle,printContent)
   iframe.contentDocument.close()
   iframe.contentWindow.print()   
   document.body.removeChild(iframe) // 打印完成之后设置isPrint是false,展示我们需要显示的内容
    that.isPrint=false 
},300)

那些兼容性不好的浏览器呢，trident和edge内核呢怎么办,只能刷新浏览器啦

setTimeout(()=>{
  let printContent=$(that.$refs.downArea).html()
  window.document.body.innerHTML= printContent;
   //调用打印功能
   window.print();
   window.document.body.innerHTML=old;//重新给页面内容赋值；
   window.location.reload(true)
   that.isPrint=false
},300)

代码是可以了，但是在我们打印的时候可能又有问题啦，不能自适应打印区域的大小，因为我页面的样式有点复杂，采用flex布局，可以说flex布局真的超级好用。简直无敌。下面是做出来的样式。
主要css就是,主要参考阮一峰老师的文章。

.flex(){
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexRow(){
  display: flex;
  justify-content: center;
  flex-direction: column;    
}

说的有点远啦。自适应打印区域，我刚开始外层是写的是固定的宽度，打印的时候不会自适应所以尝试100%，最后成功了，然后又发现一个问题，图片不显示，可以参考设置下面的写法就ok啦。另外iconfont是无效的。

* {
  -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
  color-adjust: exact !important;                 /*Firefox*/
}

image.png

下载html内容

下载的方法采用html2canvas，也可以用domToImage，开下就好，这里我用的是htmltocanvas.

html2canvas(this.$refs.downAreaWrap2,{
 width:this.$refs.downAreaWrap2.clientWidth,
 height:this.$refs.downAreaWrap2.clientHeight,
 scale: 1,
  useCORS:true,
}).then(canvas => { 
  if(that.isIEOrEdge()){
     let blob = canvas.msToBlob();
      navigator.msSaveBlob(blob);
   } else {
     let link=document.createElement('a')
     link.href=canvas.toDataURL()
     aLink.download = '1111.png';
      link.style.display='none'
      document.body.appendChild(link)
       link.click()
      document.body.removeChild(link)
       that.isPrint=false
 }            
})

判断ie和edge的方法

isIEOrEdge() {
  return navigator.userAgent.toLowerCase().match(/trident|edge/)
}

这里还想说一点，可能大家在用html2canvas的时候，图片绘制不成功
1.有线条，可能就是css计算有误，换成img标签就好啦
2.服务器的图片加载不出来，先把图片通过canvas转换成base64,然后在html2canvas

over