前言

通過html2canvas實現(xiàn)截圖功能然后保存

簡介

html2canvas庫允許我們直接在瀏覽器上拍攝網(wǎng)頁或部分網(wǎng)頁的“截圖”，即瀏覽器實現(xiàn)截圖的功能。

原理

屏幕截圖是基于DO的。其基本原理就是讀取已經(jīng)渲染好的DOM元素的結(jié)構(gòu)和樣式信息，然后基于這些信息去構(gòu)建截圖，呈現(xiàn)在canvas畫布中

操作步驟

安裝：npm install html2canvas
引入：import html2canvas from 'html2canvas';
用法：可以只傳一個參數(shù)，就是你要截圖的DOM元素，該函數(shù)返回一個Promise對象，在它的then方法中可以獲取到繪制好的canvas對象，通過調(diào)用canvas對象的toDataURL方法就可以將其轉(zhuǎn)換成圖片。html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);
});

實際應(yīng)用

//需要截圖區(qū)域<div class="box" ref="imgBox">截圖的區(qū)域</div><el-button @click="downLoad" type="primary">下載</el-button>

?

//保存圖片的方法
//即使頁面有滾動條也可進(jìn)行相應(yīng)配置，實現(xiàn)完整截圖。
//有兩種方式來實現(xiàn)保存圖片：
//1.將URL放到a標(biāo)簽的href屬性中，點擊超鏈接來實現(xiàn)圖片下載。downLoad() {html2canvas(this.$refs.imgBox, {height: this.$refs.imgBox.scrollHeight,	width: this.$refs.imgBox.scrollWidth,}).then((canvas) => {const link = document.createElement("a"); // 創(chuàng)建一個超鏈接對象實例link.download = "Button.png"; // 設(shè)置要下載的圖片的名稱link.href = canvas.toDataURL(); // 將圖片的URL設(shè)置到超鏈接的href中l(wèi)ink.click(); // 觸發(fā)超鏈接的點擊事件});},//2.打開一個新的窗口，實現(xiàn)圖片保存。downLoad() {html2canvas(this.$refs.imgBox, {height: this.$refs.imgBox.scrollHeight,	width: this.$refs.imgBox.scrollWidth,}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");var blob = this.changeToBlob(dataURL);//獲取blob對象var url = URL.createObjectURL(blob);window.open(url);//創(chuàng)建一個新的瀏覽器窗口對象, 參數(shù)指定了該窗口將會打開的地址});},//Base64 to BlobchangeToBlob(dataURL) {var arr = dataURL.split(","),type = arr[0].match(/:(.*?);/)[1],//獲取MIME 類型，即image/pngbstr = atob(arr[1]),count = bstr.length,u8arr = new Uint8Array(count);while (count--) {u8arr[count] = bstr.charCodeAt(count);}return new Blob([u8arr], {type: type,});},

結(jié)語：

如果你在導(dǎo)出的時候?qū)D表處于未展開狀態(tài)可以加延時器，如

   download() {this.showAllDataes();//數(shù)據(jù)展開函數(shù)setTimeout(() => {html2canvas(this.$refs.imgBox, {height: this.$refs.imgBox.scrollHeight,width: this.$refs.imgBox.scrollWidth,}).then((canvas) => {const link = document.createElement("a"); // 創(chuàng)建一個超鏈接對象實例const title = `全市場路演會議${this.filters.date}排行榜`;link.download = title; // 設(shè)置要下載的圖片的名稱link.href = canvas.toDataURL(); // 將圖片的URL設(shè)置到超鏈接的href中l(wèi)ink.click(); // 觸發(fā)超鏈接的點擊事件});}, 1000);},

?