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对象的宽度，我们可以去动态获取他并不能写死..

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

# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue