vue把頁面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問題)
更新時間：2023年10月30日 09:07:24 作者：我不是靚仔啊
這篇文章主要介紹了vue把頁面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問題),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
把頁面轉(zhuǎn)換成圖片導(dǎo)出(html2canvas導(dǎo)出不全)
htmlcanvas
html2canvas - Screenshots with JavaScript
我們基本都是使用這個插件去把dom對象導(dǎo)出為圖片
html2canvas(this.$refs.imageWrapper).then(canvas => {
this.isShowScroll = true
const link = document.createElement('a')
link.href = canvas.toDataURL()
link.setAttribute('download', this.$t('report.question_tip8') + '.png')
link.style.display = 'none'
document.body.appendChild(link)
link.click()
})<div ref="imageWrapper">
。。。。
</div>但是這樣卻有一個弊端，只能截取可視區(qū)域的dom對象，就是說超出屏幕的內(nèi)容我們會截圖不到
查看html2canvas文檔我們發(fā)現(xiàn)
我們可以設(shè)置導(dǎo)出的canvas的圖片
html2canvas(this.$refs.imageWrapper, {width: this.artWidth}).then(canvas => {這寬度就是我們要拿到那個超出100vw的dom對象的寬度，我們可以去動態(tài)獲取他并不能寫死..
這樣我們導(dǎo)出的圖片就可以正常的截圖到了?。?！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文介紹了Pinia的使用方法及如何實(shí)現(xiàn)狀態(tài)持久化存儲,首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細(xì)說明了如何通過Pinia-plugin-persistedstate插件實(shí)現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊2024-10-10
vue項目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能
這篇文章主要給大家介紹了關(guān)于vue項目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開發(fā)中我們需要地圖定位,就是用戶輸入位置,自動定位獲取經(jīng)緯度,需要的朋友可以參考下2023-08-08
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-11-11
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
最近在寫vue的一個項目要實(shí)現(xiàn)過渡的效果,雖然vue動畫不是強(qiáng)項,庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
仿照e簽寶,實(shí)現(xiàn)pdf電子簽章?=>?拿到pdf鏈接,移動章的位置,獲取章的坐標(biāo),怎么實(shí)現(xiàn)呢,下面小編給大家介紹vue2實(shí)現(xiàn)pdf電子簽章問題記錄,感興趣的朋友一起看看吧2023-12-12
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴(kuò)展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
這篇文章主要為大家詳細(xì)介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06