html2canvas生成图片显示不全

原因

html2canvas只能给屏幕可视范围之内的元素生成图片

办法

1. 滚动节点，使要生成图片的元素进入可视区（笨办法，不推荐）
2. 克隆节点并添加到body，使用克隆节点生成图片

    downloadForJS() {
      // 使用html2canvas 转换html为canvas
      // 获取节点高度，后面为克隆节点设置高度。
      var height = document.querySelector('#canvs').offsetHeight
      // 克隆节点，默认为false，不复制方法属性，为true是全部复制。
      var cloneDom = document.querySelector('#canvs').cloneNode(true);
      // 设置克隆节点的style属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
      cloneDom.style.height = height+"px";
      cloneDom.style.zIndex = '-1';
      // 将克隆节点动态追加到body后面。
      document.querySelector('body').append(cloneDom)
      // 插件生成base64img图片。
      html2canvas(cloneDom).then(function(canvas) {
        var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的url
        var saveLink = document.createElement('a')
        saveLink.href = imgUri
        saveLink.download = 'downLoad.png'
        saveLink.click()
      })
      // 移除复制的节点
      document.querySelector('body').removeChild(cloneDom)
    },