使用canvas进行节点截图并下载:

557 阅读1分钟

自己测试代码:使用canvas;

<canvas id="canvas" width="300" height="300" @click="downloadCanvas">
    你的浏览器还不支持canvas
</canvas>

mouted() {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        // 设置对象起始点和终点
        context.moveTo(10, 10);
        context.lineTo(200, 200);
        // 设置样式
        context.lineWidth = 2;
        context.strokeStyle = '#F5270B';
        // 绘制
        context.stroke();
        this.canvasLink = canvas.toDataURL();
}

method: {
      downloadCanvas() {
            var oA = document.createElement('a');
            oA.download = '';// 设置下载的文件名,默认是'下载'
            oA.href = this.canvasLink;
            document.body.appendChild(oA);
            oA.click();  // 生成虚拟a标签之后触发点击事件进行下载;
            oA.remove(); // 下载之后把创建的元素删除
        },
}

#canvas{
    border: 1px solid #ADACB0;
    display: block;
    margin: 20px auto;
}