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

更新时间：2026年03月19日 08:54:53 作者：予你@。

在日常开发中,经常会遇到这样的需求：将页面内容生成图片（分享海报）或者导出报表截图,因此本文将教你如何在 Vue 项目中,一键将 HTML 内容导出为图片（PNG）,需要的朋友可以参考下

一、实现原理

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

html2canvas

它的核心作用是：

DOM → Canvas → Base64 → 图片下载

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

二、安装依赖

npm install html2canvas

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

1 页面结构

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

2 JS 实现

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：

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. 图片加载不出来（跨域）

html2canvas(dom, {
  useCORS: true
})

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

Access-Control-Allow-Origin

3. 字体丢失

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

总结

核心步骤只有 4 步：

1. 获取 DOM
2. html2canvas 渲染
3. canvas 转图片
4. 触发下载

到此这篇关于Vue实现一键将HTML导出为图片的完整教程的文章就介绍到这了,更多相关Vue一键将HTML导出为图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 项目常用加载器及配置详解
本文介绍了vue 项目常用加载器及配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue如何在线预览各类型文件
这篇文章主要介绍了vue如何在线预览各类型文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
如何使用vue3+uni-app封装音乐播放插件
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下
2023-11-11
使用Vant如何完成各种Toast提示框
这篇文章主要介绍了使用Vant如何完成各种Toast提示框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue实现引入本地json的方法分析
这篇文章主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作技巧,需要的朋友可以参考下
2018-07-07
Vue实现路由传参的四种方式
在单页应用里,路由是连接页面与数据的桥梁,Vue Router 提供了四种方式把「参数」从地址栏、内存甚至编译期注入到组件,理解它们的差异,才能在面试和线上故障中游刃有余,下面小编为大家详细介绍一下
2025-09-09
VUE动态绑定class类的三种常用方式及适用场景详解
文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设计确定是否使用多个样式
2025-01-01
Vue 事件中的 .native你搞明白了吗
.native主要是给自定义的组件添加原生事件，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的，这篇文章主要介绍了vue 事件中的 .native你搞清楚了吗,需要的朋友可以参考下
2023-02-02
uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能
支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
vue proxyTable 接口跨域请求调试的示例
本篇文章主要介绍了vue proxyTable 接口跨域请求调试的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09