vue 把页面转换成图片导出（html2canvas导出不全问题）

htmlcanvas

html2canvas - Screenshots with JavaScript

我们基本都是使用这个插件去把dom对象导出为图片

        html2canvas(this.$refs.imageWrapper).then(canvas => {
          this.isShowScroll = true
          const link = document.createElement('a')
          link.href = canvas.toDataURL()
          link.setAttribute('download', this.$t('report.question_tip8') + '.png')
          link.style.display = 'none'
          document.body.appendChild(link)
          link.click()
        })

<div  ref="imageWrapper">
     。。。。
    </div>

但是这样却有一个弊端，只能截取可视区域的dom对象 ,就是说超出屏幕的内容我们会截图不到

查看html2canvas 文档我们发现

我们可以设置导出的canvas的图片 

html2canvas(this.$refs.imageWrapper, {width: this.artWidth}).then(canvas => {

 这宽度就是我们要拿到那个超出100vw的dom对象的宽度，我们可以去动态获取他并不能写死..

这样我们导出的图片就可以正常的截图到了！！！