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中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...
随机推荐
- excel数据有隐藏字符导致正则校验不通过
问题现象: 原因: 肉眼看不出任何问题,实际原因“有问题的”待校验字符串第一个单引号和第一个数字之间有个不可见字符 (注:Chrome控制台.常见编辑器定位光标 “Backspace退格删除”时,第一 ...
- Ubuntu16.04安装最新版nodejs
原文链接:https://www.jianshu.com/p/2b24cd430a7d
- 统计分析与R软件-chapter2-4
2.4 因子 统计中的变量有几中重要类别:区间变量.名义变量和有序变量.区间变量取连续的数值,可以进行求和.平均值等运算.名义变量和有序变量取离散值,可以用数值代表,也可以是字符型值,其具体数值没有加 ...
- 【转】Python基础-封装与扩展、静态方法和类方法
[转]Python基础-封装与扩展.静态方法和类方法 一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数 ...
- python3-面向对象进阶(内置方法)
面向对象进阶: isinstance和issubclass 反射 __setattr__,__getattr,__delattr__ __setitem__,__getitem,__delitem__ ...
- 用ARX自定义实体
本文介绍了构造自定义实体的步骤.必须继承的函数和必须注意的事项 1.新建一个从AcDbEntity继承的类,如EntTest,必须添加的头文件: "stdarx.h",&quo ...
- 【51nod1847】 奇怪的数学题
就当我是 A 了此题吧... 首先预备知识有点多(因为题目要处理的东西都挺毒瘤): 杜教筛运用(当然你可以用其他筛?) 第二类斯特林数相关定理 下降阶乘幂相关定理 min25 筛运用 好了可以关掉本题 ...
- fiddler 抓取 安卓模拟器 https包
2017-12-12 16:47:45 星期二 需要材料: 1. fiddler 2. 逍遥模拟器 步骤: 1. fiddler->tool->Optiions...->connec ...
- centos 6 不能上网
今天安装了一个CentOS 6,默认安装的Centos不不能上网? 解决办法:Centos 默认的链接网路的方式为:NAT方式.如果无法上网,设置Network Connection 的方式为Brid ...
- PHP程序守护进程化
一般Server程序都是运行在系统后台,这与普通的交互式命令行程序有很大的区别.glibc里有一个函数daemon.调用此函数,就可使当前进程脱离终端变成一个守护进程,具体内容参见man daemon ...