ionic3 使用html2canvas将数据导出为图片,并下载本地
2018-01-26 11:28
519 查看
1、安装html2canvas npm install --save html2canvas 官方网站 https://html2canvas.hertzen.com/ 2、在需要的组件中引入html2canvas // 导入整个模块的内容 import html2canvas from 'html2canvas'; 3、定义方法,将数据转换为canvas
let element:any = document.querySelector("#mainTable"); //要显示图片的img标签 let image:any = document.querySelector('#img'); //调用html2image方法 html2canvas(element).then( canvas=> { this.canvasImg = canvas.toDataURL("image/png");
}) // 然后给初始化的public canvasImg: any = ""; 复制,他就是图片地址。 // 展示图片 <img src="{{canvasImg}}" />
4、将图片下载到本地,定义转换图片格式方法。 下载cordova插件 $ ionic cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos" $ npm install --save @ionic-native/photo-library 导入 import { PhotoLibrary } from '@ionic-native/photo-library'; this.photoLibrary.requestAuthorization().then(() => { this.photoLibrary.saveImage(this.canvasImg , 'NewPayQr', '').then((libraryItem)=>{ this.commonUtils.alertCommon('', this.translateObj.saveImgSucc); // alert(JSON.stringify(libraryItem)); console.log(libraryItem.id); // ID of the photo console.log(libraryItem.photoURL); // Cross-platform access to photo console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail console.log(libraryItem.fileName); console.log(libraryItem.width); console.log(libraryItem.height); console.log(libraryItem.creationDate); console.log(libraryItem.latitude); console.log(libraryItem.longitude); console.log(libraryItem.albumIds); // array of ids of appropriate AlbumItem, only of includeAlbumsData was used }); }).catch(err =>{ console.log('permissions weren\'t granted') this.commonUtils.alertCommon('',this.translateObj.saveImgFail+','+err); } );
相关文章推荐
- java、Extjs导出数据库里的数据至Excel并下载至本地进行数据备份方法之一——使用servlet
- java、Extjs导出数据库里的数据至Excel并下载至本地进行数据备份方法之二——使用Action
- angular2中使用html2canvas将数据导出为图片
- 使用MFC的WinInet下载网页图片存于本地
- 使用JAVA在线下载图片至本地,并上传至FTP
- 使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
- Android异步下载网络图片&android解析xml文件的方式&使用Adapter为ListView提供数据
- 使用URLConnection下载文件或图片并保存到本地
- 网络采集软件核心技术剖析系列(3)---如何使用C#语言下载博文中的全部图片到本地并可以离线浏览
- 使用Python自动下载妹子图的图片到本地
- 关于expdp导出远程数据到本地的使用
- oracle使用exp与imp在本地导入导出数据
- 使用ADO.net将数据导出到Excel并提供下载[转]
- PHP使用外部命令导出数据库,备份到服务器并下载到本地
- 使用expdp命令导出本地某个用户的数据
- 使用ADO.net将数据导出到Excel并提供下载
- 使用ThinkPHP自带的Http类下载远程图片到本地
- [转]使用URLConnection下载文件或图片并保存到本地
- 使用highcharts 实现本地服务器导出图片
- 使用urlconnection下载文件或图片并保存到本地