Vue 中使用 html2canvas 把 html 元素导出为图片-蒲公英云

Vue 中使用 html2canvas 把 html 元素导出为图片

忘是亡心i 2022-09-04 07:49 341阅读 0赞

一、安装

npm install html2canvas

二、引入并注册 html2canvas

import html2canvas from 'html2canvas';
components: { 
    html2canvas
}

三、基础使用，document.body 为要截图的元素

html2canvas(document.body).then(function(canvas) { 
    document.body.appendChild(canvas);
});

四、Vue 中使用

// 给元素设置一个 id 方便获取该元素
<div @click="jieping" id="imageWrapper"> html2canvas </div>
// 导出图片
jieping() { 
  this.$nextTick(() => { 
    html2canvas(document.getElementById('imageWrapper'),{ 
      scale:3,      // 放大
      useCORS: true, // 使用CORS从服务器加载图像
      async: false, // 异步解析和呈现元素
      background: "#ffffff", // 背景颜色
      dpi: 300, // 处理模糊问题
    }).then(canvas => { 
      const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
      const finalImageSrc = "data:image/jpeg;base64," + img
      // 添加a标签用于下载
      const aElem = document.createElement('a')
      document.body.appendChild(aElem)  // 223kb
      aElem.href  = finalImageSrc
      // 图片下载名
      aElem.download = "组织机构图.jpg"
      aElem.click()
      document.body.removeChild(aElem)
    });
  })
},