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)文章
如何利用 vue實現(xiàn)鼠標(biāo)懸停時顯示元素或文本
Vue.js 是一種流行的 JavaScript 框架，可以使 Web 應(yīng)用程序的開發(fā)變得更加輕松和高效，這篇文章主要介紹了在 vue 中鼠標(biāo)懸停時顯示元素或文本,需要的朋友可以參考下2023-05-05
在本篇文章里小編給各位整理的是關(guān)于Vue打包后訪問靜態(tài)資源路徑問題相關(guān)知識點，需要的朋友們學(xué)習(xí)下。2019-11-11
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue3集成Vue Router從基礎(chǔ)配置到項目實踐的完整指南
如何在項目中實現(xiàn)頁面切換,而不用每次都重新加載整個頁面？答案就是 Vue Router,這篇就來聊聊 Vue Router 4.x 在 Vue 3 中的集成與使用,需要的朋友可以參考下2026-05-05
這篇文章主要為大家詳細介紹了如何使用Vue快速實現(xiàn)一個無縫輪播效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-04-04
vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點
這篇文章主要為大家詳細介紹了vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了詳解vuex狀態(tài)管理模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了Vue分頁器實現(xiàn)原理，編寫了分頁器組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
一文詳解如何在Vue網(wǎng)站中實現(xiàn)多語言支持
在當(dāng)今全球化的互聯(lián)網(wǎng)環(huán)境中,為網(wǎng)站提供多語言支持已成為提升用戶體驗和擴大受眾范圍的關(guān)鍵策略,本文為大家介紹了如何在Vue網(wǎng)站中實現(xiàn)多語種支持功能,有需要的可以了解下2025-03-03