html2canvas生成图片显示不全-蒲公英云

html2canvas生成图片显示不全

原因

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

办法

滚动节点，使要生成图片的元素进入可视区（笨办法，不推荐）

克隆节点并添加到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)
},