ts + vue 页面截图

背景：把当前页面某块功能生成图片

安装html2canvas

yarn add html2canvas

//HelloWorld.vue

//screenshotUnit.ts
import { Vue } from "vue-property-decorator";
import html2canvas from "html2canvas";
export class screenShot extends Vue {
    //图片格式转换方法
    dataURLToBlob(dataurl: any): Record {
        const arr = dataurl.split(",");
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
    //点击方法
    saveImage(divText: any, imgText: any): void {
        const canvasID = (this as any).$refs[divText];
        const a = document.createElement("a");
        html2canvas(canvasID).then((canvas: any) => {
            const dom = document.body.appendChild(canvas);
            dom.style.display = "none";
            a.style.display = "none";
            document.body.removeChild(dom);
            const blob: any = this.dataURLToBlob(dom.toDataURL("image/png"));
            a.setAttribute("href", URL.createObjectURL(blob));
            //这块是保存图片操作  可以设置保存的图片的信息
            a.setAttribute("download", imgText + ".png");
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(blob);
            document.body.removeChild(a);
        });
    }
}

啦啦啦，一个页面截图就写完了