web畫面截圖功能實作
把渲染在web畫面上指定的Dom，轉成一張圖片後下載。在實作上需要使用Html5 Canvas物件(理解成畫布)來繪製指定的Dom，再把Canvas物件轉換成Blob，再轉換成可供瀏覽器觸發下載的ObjectURL格式，並執行觸發下載動作。
lib
1.html2canvas.js 把web畫面上指定的Dom，轉成一個Canvas物件。
// in vue3 .vueimport html2canvas from "html2canvas";//...(略)html2canvas(instance.refs.targetDom).then((canvas) => { //...});2.FileSaver.js 把Canvas物件轉成Blob格式，並呼叫FileSaver的API saveAs。而在SaveAs的實作中，則是把Blob格式轉換成可下載的ObjectURL格式。
import { saveAs } from "file-saver";//...(略)canvas.toBlob((blob) => { saveAs( blob, `imageName.png` );});//lib FileSaver.js saveAsfunction saveAs(blob, var URL = _global.URL || _global.webkitURL; var a = document.createElement("a"); name = name || blob.name || "download"; a.download = name; a.rel = "noopener"; if (typeof blob === "string") { // 略 } else { a.href = URL.createObjectURL(blob); setTimeout(function () { URL.revokeObjectURL(a.href); }, 4e4); // 40s setTimeout(function () { click(a); }, 0); }}實作code
//實作時有先將畫面一些不需要截圖的部分先隱藏 再擷取重新選染後的Domconst isCapturing = ref(falseconst => { isCapturing.value = true; setTimeout(() => { html2canvas(instance.refs.row2).then((canvas) => { isCapturing.value = false; canvas.toBlob((blob) => { saveAs( blob, `${curDepInfoDateStr.value} ${curDepInfo.depName}.png` ); }); }); }, 200);};Blob
二進位大型物件（英語：binary large object ，或英語：basic large object，縮寫為Blob、BLOB、BLOb），在資料庫管理系統中，將二進位資料儲存為一個單一個體的集合。Blob通常是影像、聲音或多媒體檔案。
物件資料轉換關係圖
Image、DataURL、ObjectURL、Blob、Canvas、ImageData、ArrayBuffer、ImageURL。