vue页面转换为图片，app访问支持放大缩小

第一步：页面转换为图片

1.下载插件：npm install --save html2canvas

2.在使用的页面引用：import html2canvas from "html2canvas"

3.使用方法

 toImage() {

    // 第一种办法,保存的图片不完整
        // html2canvas(this.$refs.akl).then(canvas => {

        //   let dataURL = canvas.toDataURL("image/png");
        //   this.imgUrl = dataURL;
        //   this.condition=false
        // });
            //  第二种办法
      // 获取节点高度，后面为克隆节点设置高度。
      var height = document.querySelector('#canvs').offsetHeight
      var width = document.querySelector('#canvs').offsetWidth

      // 克隆节点，默认为false，不复制方法属性，为true是全部复制。
      var cloneDom = document.querySelector('#canvs').cloneNode(true);
      // 设置克隆节点的style属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
      cloneDom.style.height = height+"px";
      cloneDom.style.width = width+"px"-100+"px";
      cloneDom.style.zIndex = '-1';
      // 将克隆节点动态追加到body后面。
      document.querySelector('body').append(cloneDom)
      // 插件生成base64img图片。
       let _this = this
      html2canvas(cloneDom).then(function(canvas) {
        var dataURL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的url
        // var dataURL =  canvas.toDataURL("image/png");

        _this.textUrl=dataURL

 
        // 打开页面自动下载功能
        // var saveLink = document.createElement('a')
        // saveLink.href = imgUri
        // console.log(this.textUrl);
        // saveLink.download = 'downLoad.png'
        // saveLink.click()
      })
      // 移除复制的节点
      document.querySelector('body').removeChild(cloneDom)

      // 将原文件隐藏
      this.contentType=false
      }

5.根据自己的需求 再修改样式

6.开启放大缩小功能：

 <meta name="viewport" content="width=device-width, initial-scale=1,
 maximum-scale=1, user-scalable=yes">

vue项目的 index.html  页面的  meta 标签加 user-scalable=yes"