angular2中使用html2canvas将数据导出为图片,并下载本地

前端之家收集整理的这篇文章主要介绍了angular2中使用html2canvas将数据导出为图片,并下载本地前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、安装html2canvas

  1. npm install --save html2canvas

官方网站
https://html2canvas.hertzen.com/

2、在需要的组件中引入html2canvas

  1. // 导入整个模块的内容
  2. import * as html2canvas from 'html2canvas';

3、定义方法,将数据转换为canvas

  1. // #mainTable是数据表格的id
  2. takeScreenShot() {
  3. // 使用html2canvas插件,将数据源中的数据转换成画布。
  4. html2canvas(document.querySelector("#mainTable")).then(canvas => {
  5. console.log(canvas,"生成的画布文件");
  6. this.canvasImg = canvas.toDataURL("image/png");
  7. });
  8. }
  9. // 然后给初始化的public canvasImg: any = ""; 复制,他就是图片地址。
  10.  
  11. // 展示图片
  12. <img src="{{canvasImg}}" />

4、将图片下载到本地,定义转换图片格式方法

  1. // filename: 文件名称, content: canvas图片流地址
  2. downloadFile(filename,content) {
  3. var base64Img = content;
  4. var oA = document.createElement('a');
  5. oA.href = base64Img;
  6. oA.download = filename;
  7. var event = document.createEvent('MouseEvents');
  8. event.initMouseEvent('click',true,false,window,null);
  9. oA.dispatchEvent(event);
  10. }
  11. // 方法调用
  12. saveImgLocal() {
  13. this.downloadFile("导出图片",this.canvasImg);
  14. }

5、下载

  1. <button label="下载" pButton (click)="saveImgLocal()"></button>

猜你在找的Angularjs相关文章