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

  

ionic3 使用html2canvas将数据导出为图片,并下载本地的更多相关文章

  1. abp中文件下载,将内存数据导出到Excel并下载

    1.数据导出为Excel的Stream using System; using System.Collections.Generic; using System.IO; using Abp.Colle ...

  2. 封装Excls数据导出功能 返回一个下载链接地址

    /// <summary> /// 获取本地存储地址 /// </summary> /// <param name="dt"></para ...

  3. PHPexcel数据导出

    使用PHPexcel数据导出,可以从网上下载phpexcel引入使用,下面是我做的简单的数据导出练习 一.下载phpexcel 二.引发这个导出(我这里是写了一个简单的点击事件) <div id ...

  4. OpenXml Excel数据导入导出(含图片的导入导出)

    声明:里面的很多东西是基于前人的基础上实现的,具体是哪些人 俺忘了,我做了一些整合和加工 这个项目居于openxml做Excel的导入导出,可以用OpenXml读取Excel中的图片 和OpenXml ...

  5. 【基于WinForm+Access局域网共享数据库的项目总结】之篇二:WinForm开发扇形图统计和Excel数据导出

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  6. 将C1Chart数据导出到Excel

    大多数情况下,当我们说将图表导出到Excel时,意思是将Chart当成图片导出到Excel中.如果是这样,你可以参考帮助文档中保存和导出C1Chart章节. 不过,也有另一种情况,当你想把图表中的数据 ...

  7. 使用POI实现数据导出Excel表格

    package cn.sh.bzt.kwj.action; import java.io.IOException; import java.io.OutputStream; import java.t ...

  8. 数据导出为excel表格

    ---恢复内容开始--- 方式一: 通过request和response中携带的数据导出表格,导出的结果会将页面中展示的内容全部导出.代码如下: //调出保存框,下载页面所有内容 String fil ...

  9. JAVA将Excel中的报表导出为图片格式(一)问题背景

    如题所示,先抛出一个问题,如何使用JAVA将Excel中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...

随机推荐

  1. 前端面试(二):N轮面试

    一面 在一面中要掌握什么技巧,主要考察前端开发的基础知识 1.面试技巧.页面布局类 页面布局小结: 语义化掌握到位 页面布局理解深刻 CSS基础知识扎实 思维灵活且积极上进 代码书写规范 2.CSS盒 ...

  2. java并发基础

    一.创建线程 1.使用Executor:java.util.concurrent包中的执行器(Execute)为你管理Thread对象,从而简化并发编程. package thread; import ...

  3. POJ 3253 Fence Repair (贪心)

    题意:将一块木板切成N块,长度分别为:a1,a2,……an,每次切割木板的开销为当前木板的长度.求出按照要求将木板切割完毕后的最小开销. 思路:比较奇特的贪心 每次切割都会将当前木板一分为二,可以按切 ...

  4. Struts2学习(三)

    一.值栈 1.OGNL表达式 OGNL的概述:对象图导航语言,是一门功能强大的表达式语言. 2.值栈 值栈的概述(ValueStack):是一个接口,实现类OgnlValueStack.是数据的中转站 ...

  5. Mint-UI

    Mint-UI是基于Vue.js的移动端组件库 Mint-UI是Vue组件库,是使用Vue技术封装出来的成套的组件,可以无缝地和Vue项目进行集成开发 Mint UI官网 不同版本的安装 导入有两种方 ...

  6. Java 进制间的转换

    package com.touch.onlinedu; public class Test { public static void main(String[] args) { // 1 : 0001 ...

  7. linux 制作U盘启动,和定制系统

    找到u盘的路径 fdisk -l 将镜像写入u盘 dd if=/root/Downloads/kali-linux-2017.1-amd64.iso of=/dev/sdc 定制U盘启动系统: 安装完 ...

  8. C/S 开发框架 ----- 广州本地

    C/S 开发框架 -----  广州本地: 1) 爱奇迪    http://www.iqidi.com       发现一个源码出售站   http://www.51aspx.com/code/co ...

  9. 从运维角度来分析mysql数据库优化的一些关键点【转】

    概述 一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善. 1.数据库表设计 项目立项后,开发部根据产品部需求开发项目,开发工程师工作其中一部分 ...

  10. asyncio之asyncio.run

    asyncio.run(coro, *, debug=False) python3.7加入,只能作为asyncio的入口函数.