自己测试代码:使用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;
}