Vue实现一键将HTML导出为图片的完整教程

npm install html2canvas

<div id="capture">
 <h2>这是要导出的内容</h2>
 <p>Vue 导出 HTML 为图片示例</p>
</div>
<button @click="downloadImage">下载图片</button>

import html2canvas from "html2canvas"
export default {
  methods: {
    downloadImage() {
      const dom = document.getElementById("capture")
      html2canvas(dom, {
        scale: 2, // 提高清晰度
        useCORS: true
      }).then(canvas => {
        const imgData = canvas.toDataURL("image/png")
        const link = document.createElement("a")
        link.href = imgData
        link.download = "vue截图.png"
        link.click()
      })
    }
  }
}

downloadImage() {
  html2canvas(this.$refs.capture, {
    scale: 2
  }).then(canvas => {
    const link = document.createElement("a")
    link.download = "test.png"
    link.href = canvas.toDataURL()
    link.click()
  })
}

html2canvas(dom, {
  scale: 2 // 或 window.devicePixelRatio
})

html2canvas(dom, {
  useCORS: true
})

document.fonts.ready.then(() => {
  downloadImage()
})