1、命令:npm install --save html2canvas
2、在angular.json中引入
3、在typings.d.ts中定义下
4、html代码
<div id="capture">页面内容(要保存部分id为capture)</div>
<a #downLoadImg class="down-load" href="" download="{{title}}.jpg">
<i *ngIf="isDown" title="保存图片" class="anticon anticon-save"></i>
</a>
|
5、ts代码
@ViewChild('downLoadImg') downloadimg: ElementRef;
// 下载
downLoadImg() {
const that = this;
this.isDown = false;
setTimeout(() => {
html2canvas(document.querySelector("#capture")).then(canvas => {
that.downloadimg.nativeElement.href = canvas.toDataURL("image/jpeg");
that.isDown = true;
});
},1200)
}
|