2021-05-07 html2canvas网页保存图片到本地

1.div块没有出现滚动条（div代表需要下载图片区域），可下载的二维码缺失（我遇见的）

企业微信截图_16207032522275.png

let that = this
// 方法一（已测试好使）
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
// 方法二，设置scrollY （已测试，用户体验更好）
let domObj = document.getElementById('container')
html2canvas(domObj,{
          scrollY: -window.scrollY
        }).then((canvas) => {
          let a = document.createElement('a')
          a.href = canvas.toDataURL()
          let name = that.fileName.replace(/\./g,"_");
          a.download = name
          a.click()
        })

2.div块出现滚动条（div代表需要下载图片区域），可下载图片只是可视区域内，滚动条区域的部分缺失

this.$nextTick(()=>{
        let domObj = document.getElementById('container')
        // 设置height和windowHeight即可
        html2canvas(domObj,{
          height: document.getElementById('container').scrollHeight,
          windowHeight: document.getElementById('container').scrollHeight
        }).then((canvas) => {
          let a = document.createElement('a')
          a.href = canvas.toDataURL()
          let name = that.fileName.replace(/\./g,"_");
          a.download = name
          a.click()
        })
      })

3.图片下载后【img标签】区域空白

this.$nextTick(()=>{
        let domObj = document.getElementById('container')
        html2canvas(domObj,{
          useCORS:true  //设置图片img资源可跨域
        }).then((canvas) => {
          let a = document.createElement('a')
          a.href = canvas.toDataURL()
          let name = that.fileName.replace(/\./g,"_");
          a.download = name
          a.click()
        })
      })

4.图片下载后【video标签】视频区域空白

<!--视频:video-->
// 第一步：在video标签追加一个隐藏的image视频封面图片
        <template v-if="showElement(item.pageElements, 'video')">
          <video class="video" :src="element.filePath" :poster="element.thumbnail" controls v-for="(element, index) in item.attachmentList.filter(v => v.fileType === 'VIDEO')" :key="index"></video>
          <el-image class="videoImg display-none" :src="element.thumbnail" v-for="(element, index) in item.attachmentList.filter(v => v.fileType === 'VIDEO')" :key="index"></el-image>
        </template>

//第二步：点击下载图片时候
  downPicture() {
      $('#btn').addClass('display-none')
      $('.video').addClass('display-none')//隐藏video标签
      $('.videoImg').removeClass('display-none')//显示视频封面图片

      this.$nextTick(()=>{
        let that = this;
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop
        let domObj = document.getElementById('container')
        html2canvas(domObj,{
          y:scrollTop,
          useCORS:true,
          height: document.getElementById('container').scrollHeight,
          windowHeight: document.getElementById('container').scrollHeight
        }).then((canvas) => {
          let a = document.createElement('a')
          a.href = canvas.toDataURL()
          let name = that.fileName.replace(/\./g,"_");
          a.download = name
          a.click()
          $('#btn').removeClass('display-none')
          $('.video').removeClass('display-none')//显示video标签
          $('.videoImg').addClass('display-none')//隐藏视频封面图片
        })
      })

    },