vue把頁面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問題)

更新時(shí)間：2023年10月30日 09:07:24 作者：我不是靚仔啊

這篇文章主要介紹了vue把頁面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

把頁面轉(zhuǎn)換成圖片導(dǎo)出(html2canvas導(dǎo)出不全)

htmlcanvas

html2canvas - Screenshots with JavaScript

我們基本都是使用這個(gè)插件去把dom對(duì)象導(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>

但是這樣卻有一個(gè)弊端，只能截取可視區(qū)域的dom對(duì)象，就是說超出屏幕的內(nèi)容我們會(huì)截圖不到

查看html2canvas文檔我們發(fā)現(xiàn)

我們可以設(shè)置導(dǎo)出的canvas的圖片

html2canvas(this.$refs.imageWrapper, {width: this.artWidth}).then(canvas => {

這寬度就是我們要拿到那個(gè)超出100vw的dom對(duì)象的寬度，我們可以去動(dòng)態(tài)獲取他并不能寫死..

這樣我們導(dǎo)出的圖片就可以正常的截圖到了?。?！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3 pinia使用及持久化注冊(cè)
本文介紹了Pinia的使用方法及如何實(shí)現(xiàn)狀態(tài)持久化存儲(chǔ),首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細(xì)說明了如何通過Pinia-plugin-persistedstate插件實(shí)現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊(cè)
2024-10-10
vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開發(fā)中我們需要地圖定位,就是用戶輸入位置,自動(dòng)定位獲取經(jīng)緯度,需要的朋友可以參考下
2023-08-08
Vue組件生命周期三個(gè)階段全面總結(jié)講解
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過程,稱這是Vue的?命周期
2022-11-11
Animate.css在vue中的使用方式
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue中動(dòng)畫與過渡的使用教程
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動(dòng)畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue2實(shí)現(xiàn)pdf電子簽章問題記錄
仿照e簽寶,實(shí)現(xiàn)pdf電子簽章?=>?拿到pdf鏈接,移動(dòng)章的位置,獲取章的坐標(biāo),怎么實(shí)現(xiàn)呢,下面小編給大家介紹vue2實(shí)現(xiàn)pdf電子簽章問題記錄,感興趣的朋友一起看看吧
2023-12-12
探索Vue如何高效構(gòu)建可復(fù)用組件
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴(kuò)展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下
2024-12-12
vue滾動(dòng)軸插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)軸插件better-scroll的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
詳解Vue.use自定義自己的全局組件
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06