dom-to-image-more 使用

最新推荐文章于 2024-07-22 08:46:57 发布

Sengoku_Xingzi

最新推荐文章于 2024-07-22 08:46:57 发布

阅读量693

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Sengoku_Xingzi/article/details/135818980

版权

本文介绍了如何使用`dom-to-image-more`库将HTML内容转换为图片，包括创建引用节点、调用API生成PNG，以及处理可能出现的错误并提供图片下载功能。

摘要由CSDN通过智能技术生成

与网上不同的使用方式：

官网

dom-to-image-more - npm

这里不会出现两行缩略不行的bug

yarn add dom-to-image-more

下面生成图片并下载图片

const picture = ref()

  const dom2img = () => {
    var node = picture.value
    domtoimage
      .toPng(node, { cacheBust: true, bgcolor: 'white', copyDefaultStyles: false })
      .then(function (dataUrl) {
        var img = new Image()
        img.src = dataUrl
        document.body.appendChild(img)
        exportPicture(dataUrl)
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error)
      })
  }

  // 导出图片
  const exportPicture = (link, name = '未命名文件') => {
    const file = document.createElement('a')
    file.style.display = 'none'
    file.href = link
    file.download = decodeURI(name)
    document.body.appendChild(file)
    file.click()
    document.body.removeChild(file)
    showPicture.value = false
  }