Vue实现一键将HTML导出为图片的完整教程
作者：予你@。
在日常开发中,经常会遇到这样的需求：将页面内容生成图片（分享海报）或者导出报表截图,因此本文将教你如何在 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导出为图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！