快捷導(dǎo)航

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

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

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

把頁(yè)面轉(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ì)象，就是說(shuō)超出屏幕的內(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)文章

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