Vue 实现：点击按钮将 HTML 导出为图片（完整教程）

在日常开发中，经常会遇到这样的需求：

将页面内容生成图片（分享海报）

导出报表截图

本文将教你如何在 Vue 项目中，一键将 HTML 内容导出为图片（PNG）。

一、实现原理

我们借助一个非常常用的库：

html2canvas

它的核心作用是：

DOM → Canvas → Base64 → 图片下载

简单来说，就是把页面"截图"下来。

二、安装依赖

npm install html2canvas

三、基础实现（完整代码）

1 页面结构

html 复制代码

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

<button @click="downloadImage">下载图片</button>

2 JS 实现

javascript 复制代码

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()
      })
    }
  }
}

四、推荐写法（Vue 更优雅）

使用 ref 获取 DOM：

javascript 复制代码

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

五、效果流程

点击按钮

↓

获取 DOM

↓

html2canvas 渲染

↓

生成 canvas

↓

转 base64

↓

下载图片

六、常见问题 & 解决方案

1. 图片模糊

原因：分辨率低

解决：

html2canvas(dom, {

scale: 2 // 或 window.devicePixelRatio

})

2. 图片加载不出来（跨域）

javascript 复制代码

html2canvas(dom, {
  useCORS: true
})

同时图片服务器需要支持：

Access-Control-Allow-Origin

3. 字体丢失

复制代码

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

总结

核心步骤只有 4 步：

获取 DOM

html2canvas 渲染

canvas 转图片

触发下载