ionic3 使用html2canvas将数据导出为图片，并下载本地

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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);

} );