Vue實(shí)現(xiàn)一鍵將HTML導(dǎo)出為圖片的完整教程
更新時間：2026年03月19日 08:54:53 作者：予你@。
在日常開發(fā)中,經(jīng)常會遇到這樣的需求：將頁面內(nèi)容生成圖片（分享海報）或者導(dǎo)出報表截圖,因此本文將教你如何在 Vue 項(xiàng)目中,一鍵將 HTML 內(nèi)容導(dǎo)出為圖片（PNG）,需要的朋友可以參考下
一、實(shí)現(xiàn)原理
我們借助一個非常常用的庫：
html2canvas
它的核心作用是：
DOM → Canvas → Base64 → 圖片下載
簡單來說，就是把頁面“截圖”下來。
二、安裝依賴
npm install html2canvas
三、基礎(chǔ)實(shí)現(xiàn)（完整代碼）
1 頁面結(jié)構(gòu)
<div id="capture"> <h2>這是要導(dǎo)出的內(nèi)容</h2> <p>Vue 導(dǎo)出 HTML 為圖片示例</p> </div> <button @click="downloadImage">下載圖片</button>
2 JS 實(shí)現(xiàn)
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 更優(yōu)雅）
使用 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()
})
}五、效果流程
點(diǎn)擊按鈕
↓
獲取 DOM
↓
html2canvas 渲染
↓
生成 canvas
↓
轉(zhuǎn) base64
↓
下載圖片
六、常見問題 & 解決方案
1. 圖片模糊
原因：分辨率低
解決：
html2canvas(dom, {
scale: 2 // 或 window.devicePixelRatio
})2. 圖片加載不出來（跨域）
html2canvas(dom, {
useCORS: true
})同時圖片服務(wù)器需要支持：
Access-Control-Allow-Origin
3. 字體丟失
document.fonts.ready.then(() => {
downloadImage()
})總結(jié)
核心步驟只有 4 步：
1. 獲取 DOM
2. html2canvas 渲染
3. canvas 轉(zhuǎn)圖片
4. 觸發(fā)下載
到此這篇關(guān)于Vue實(shí)現(xiàn)一鍵將HTML導(dǎo)出為圖片的完整教程的文章就介紹到這了,更多相關(guān)Vue一鍵將HTML導(dǎo)出為圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談Vue 自動化部署打包上線，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
解決echarts echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置問題
這篇文章主要介紹了解決echarts echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章介紹了在?Web?應(yīng)用中處理大量數(shù)據(jù)展示的兩種滾動加載更多方案,滾動加載更多通過分頁工作,優(yōu)點(diǎn)是實(shí)現(xiàn)簡單、用戶體驗(yàn)流暢,缺點(diǎn)是內(nèi)存占用可能過高,虛擬列表只渲染視口內(nèi)容,性能好但實(shí)現(xiàn)復(fù)雜,本文介紹了Vue實(shí)現(xiàn)滾動加載更多效果,需要的朋友可以參考下2024-12-12
Vue實(shí)現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-router路由參數(shù)刷新消失的問題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問題解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了對類Vue的MVVM前端庫的實(shí)現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法，有需要的朋友可以借鑒參考下，希望可以有所幫助，祝大家多多進(jìn)步早日升職加薪2021-09-09
這篇文章主要介紹了vue router-link下劃線和顏色問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08