如何用vue實現(xiàn)網頁截圖你知道嗎
更新時間：2021年11月17日 11:50:33 作者：suoh''s Blog
這篇文章主要為大家介紹了vue如何實現(xiàn)網頁截圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1、安裝html2Canvas
npm install html2canvas --save
2、在需要的vue組件中引入
import html2canvas from "html2canvas";
3、編寫一個截圖按鈕
<el-button class="button-dalod" size="mini" title="生成圖片" @click="toImage()" icon="el-icon-download"></el-button>
4、調用函數(shù)toImage
// 頁面元素轉圖片
toImage () {
// 手動創(chuàng)建一個 canvas 標簽
const canvas = document.createElement("canvas")
// 獲取父標簽，意思是這個標簽內的 DOM 元素生成圖片
// imageTofile是給截圖范圍內的父級元素自定義的ref名稱
let canvasBox = this.$refs.imageTofile
// 獲取父級的寬高
const width = parseInt(window.getComputedStyle(canvasBox).width)
const height = parseInt(window.getComputedStyle(canvasBox).height)
// 寬高 * 2 并放大 2 倍 是為了防止圖片模糊
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const context = canvas.getContext("2d");
context.scale(2, 2);
const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true
}
html2canvas(canvasBox, options).then((canvas) => {
// toDataURL 圖片格式轉成 base64
let dataURL = canvas.toDataURL("image/png")
console.log(dataURL)
this.downloadImage(dataURL)
})
},
//下載圖片
downloadImage(url) {
// 如果是在網頁中可以直接創(chuàng)建一個 a 標簽直接下載
let a = document.createElement('a')
a.href = url
a.download = '首頁截圖'
a.click()
},
別忘了給頁面所在截圖范圍內的父級添加ref屬性，方便canvas找到父級計算寬高從而截屏
這就是截圖出來的效果：
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
詳解在Vue中如何使用axios跨域訪問數(shù)據(jù)
本篇文章主要介紹了在Vue中如何使用axios跨域訪問數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
我們開發(fā)后臺管理系統(tǒng)過程中，會由不同的人操作系統(tǒng)，有admin（管理員）、superAdmin(超管)，及各種運營、財務人員。為了區(qū)別這些人員，會給不同的人分配不一樣的角色來展示不同的菜單，這就必須要通過動態(tài)路由來實現(xiàn)。下面就來介紹vue實現(xiàn)動態(tài)路由,需要的朋友可參考一下2021-10-10
Vue實現(xiàn)實時更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細介紹了Vue如何實現(xiàn)實時更新sessionStorage數(shù)據(jù)，文中的示例代碼講解詳細，具有一定的參考價值，需要的可以參考一下2023-06-06
vue2.0中vue-cli實現(xiàn)全選、單選計算總價格的實例代碼
本篇文章主要介紹了vue2.0中vue-cli實現(xiàn)全選、單選計算總價格的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
今天小編就為大家分享一篇vue+vue-router轉場動畫的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue2.0的活動倒計時組件countdown(附源碼下載)
這是一款基于vue2.0的活動倒計時組件，可以使用服務端時間作為當前時間，在倒計時開始和結束時可以自定義回調函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計時組件countdown,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue控制多行文字展開收起的實現(xiàn)示例（也叫控制文字展開隱藏），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要給大家介紹了關于vue實現(xiàn)簡易計算器的4種方法,文中通過代碼介紹的非常詳細,對大家學習或者使用vue覺有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
在Vue中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關于Vue3中防抖/節(jié)流的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue之webpack -v報錯解決方案總結,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09