页面元素转为图片

最新推荐文章于 2024-02-05 10:37:15 发布

大脸猫爱喝牛奶

最新推荐文章于 2024-02-05 10:37:15 发布

阅读量201

点赞数

分类专栏： VUE+element UI 文章标签： vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/ifmushroom/article/details/128784742

版权

VUE+element UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

this.getToImg(this.pdfDomId).then((res) => {
    console.log(res)
    let imgId='img'+this.tinymceId
    let imgDom = document.getElementById(imgId)
    if(imgDom){
      imgDom.src = res
    }else{
      const img = document.createElement('img')
      img.width = 1000
      img.src = res
      img.id = imgId
      //将图片插入页面上指定元素中
      document.getElementById('tinymce').appendChild(img)
    }
});

import html2Canvas from 'html2canvas'

export default {
  install(Vue) {
    Vue.prototype.getToImg = function (pdfTitle) {
      let dom = document.querySelector('#'+pdfTitle);
      return html2Canvas(dom, {
        allowTaint: true
      }).then(function (canvas) {
          return canvas.toDataURL('image/jpeg', 1.0)
        }
      )
    }
  }
}

项目里，这个地方的需求是点击按钮，把“隐藏”起来的元素转为图片显示出来。隐藏元素一开始用的style="margin-top: -999999999px"这种方法，这样做在火狐浏览器上会有问题，后面改为style="position: fixed;left: 300%;bottom:-100%;width:100%"得以解决