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)
    },