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);
} );
ionic3 使用html2canvas将数据导出为图片,并下载本地的更多相关文章
- abp中文件下载,将内存数据导出到Excel并下载
1.数据导出为Excel的Stream using System; using System.Collections.Generic; using System.IO; using Abp.Colle ...
- 封装Excls数据导出功能 返回一个下载链接地址
/// <summary> /// 获取本地存储地址 /// </summary> /// <param name="dt"></para ...
- PHPexcel数据导出
使用PHPexcel数据导出,可以从网上下载phpexcel引入使用,下面是我做的简单的数据导出练习 一.下载phpexcel 二.引发这个导出(我这里是写了一个简单的点击事件) <div id ...
- OpenXml Excel数据导入导出(含图片的导入导出)
声明:里面的很多东西是基于前人的基础上实现的,具体是哪些人 俺忘了,我做了一些整合和加工 这个项目居于openxml做Excel的导入导出,可以用OpenXml读取Excel中的图片 和OpenXml ...
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇二:WinForm开发扇形图统计和Excel数据导出
篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
- 将C1Chart数据导出到Excel
大多数情况下,当我们说将图表导出到Excel时,意思是将Chart当成图片导出到Excel中.如果是这样,你可以参考帮助文档中保存和导出C1Chart章节. 不过,也有另一种情况,当你想把图表中的数据 ...
- 使用POI实现数据导出Excel表格
package cn.sh.bzt.kwj.action; import java.io.IOException; import java.io.OutputStream; import java.t ...
- 数据导出为excel表格
---恢复内容开始--- 方式一: 通过request和response中携带的数据导出表格,导出的结果会将页面中展示的内容全部导出.代码如下: //调出保存框,下载页面所有内容 String fil ...
- JAVA将Excel中的报表导出为图片格式(一)问题背景
如题所示,先抛出一个问题,如何使用JAVA将Excel中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...
随机推荐
- steps/train_mono.sh
<<单音素HMM的训练流程图.vsdx>> 定义拓扑结构.参数初始化 $ gmm-init-mono --shared-phones=$lang/phones/sets.int ...
- HashMap 底层分析
以下基于 JDK1.7 分析 如图所示,HashMap底层是基于数组和链表实现的,其中有两个重要的参数: ---容量 ---负载因子 容量的默认大小是16,负载因子是0.75,当HashMap的siz ...
- ES6走一波 Proxy/Reflect
Proxy:像拦截器,对目标对象修改等进行拦截,是一种元编程(meta programming),即修改JS语言本身. //生成proxy实例,两个参数都是对象,targetObj是要拦截的目标对象, ...
- 2018JAVA面试题附答案
JAVA基础 JAVA中的几种基本类型,各占用多少字节? String能被继承吗?为什么? 不可以,因为String类有final修饰符,而final不能被继承的,实现细节不允许改变.平常我们定义的S ...
- python第二天,list和tuple
概念:list是集合,且是可变集合,tuple是元组集合,不可变集合. 1.Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 主要知识点:初始化 ...
- Python3-进程池与线程池
进程池与线程池 在刚开始学多进程或多线程时,我们迫不及待地基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是:服务的开启的进程数或线程数都会随着并发的客户端数目地增多而增多,这会对服 ...
- MySQL log_slave_updates 参数【转】
说明:最近部署了mysql的集群环境,详细如下M01和M02为主主复制,M01和R01为主从复制:在测试的过程中发现了以下问题: 1.M01和M02的主主复制是没有问题的(从M01写入数据能同步到M0 ...
- Webpack2 中的 NamedModulesPlugin 与 HashedModuleIdsPlugin
要讨论Webpack 2中新增的这两个plugin的功能,还要先从使用Webpack打包的项目的前端资源缓存方案说起. 通常在使用了Webpack的项目中我们会使用CommonsChunkPlugin ...
- 设计模式C++学习笔记之十七(Chain of Responsibility责任链模式)
17.1.解释 概念:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. main(),客户 IWom ...
- Django-jinjia2的赋值
一 变量 1. 变量的形式是:{{ variable }},当模板引擎碰到变量时,引擎使用变量的值替代变量: 2. 使用“.”能够访问变量的属性: 3. 当模板引擎碰到“.”的时候,查找顺序是: a) ...