vue通过html2canvas来将div保存成图片

html2canvas链接：官网

html如下： 

<div class="char" id="char" ref="char"></div>

vue方法如下： 

//图片转换格式的方法 直接使用就好  不需要知道为什么
            dataURLToBlob(dataurl) {
                let arr = dataurl.split(',');
                let mime = arr[0].match(/:(.*?);/)[1];
                let bstr = atob(arr[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            },
            /*保存图片的方法（即按钮点击触发的方法）
              第一个参数为需要保存的div的id名
              第二个参数为保存图片的名称 */
            saveImage(divText, imgText) {
                let canvasID = this.$refs[divText];
                let that = this;
                let a = document.createElement('a');
                 html2canvas(canvasID).then(canvas => {
                    let dom = document.body.appendChild(canvas);
                    dom.style.display = 'none';
                    a.style.display = 'none';
                    document.body.removeChild(dom);
                    let blob = that.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);
                });
            },

调用：

this.saveImage('char', '测试');