Vue使用html2canvas将页面转化为图片

需求是微信端将页面截屏之后保存到本地，使用了html2canvas插件

install

npm install --save html2canvas

在所需页面引入

import html2canvas from "html2canvas"

use

      

        

          
          
支付成功
        
      
      

        
          收款商家
          {{merchant}}
        
        
          费用名称
          {{contName}}
        
        
          缴费金额
          {{chargePrice}}元
        
      
    
    

      生成截图
    

vue中用ref来指定你需要截屏的dom

toImage() {
        html2canvas(this.$refs.imageWrapper).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;
          if (this.imgUrl !== "") {
            this.dialogTableVisible = true;
          }
        });
      }