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中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...
随机推荐
- python基础(八种数据类型)
Python的八种数据类型 八种数据类型分别是: number(数字).string(字符串).Boolean(布尔值).None(空值) list(列表).tuple(元组).dict(字典).se ...
- mkyaffs2image 生成不了120M的镜像文件的解决方法
下载链接: http://download.csdn.net/download/macrocrazier/3807761 用上述下载的链接会出现Failed to execute /linuxrc ...
- 【数据表格】datatable+SpringMVC+Spring Data JPA
初步实现 $("#userTable").dataTable({ "processing": true, "serverSide": tru ...
- Angular4
1.安装node.js 官网下载安装 npm会跟着被自动安装 2.安装Angular工具(AngularCli) 1.使用npm安装 npm install -g @angular/cli 2使用cn ...
- 20165221 2017-2018-2《Java程序设计》课程总结
20165221 2017-2018-2<Java程序设计>课程总结 一.作业连接汇总 每周作业链接 预备作业一: 20165221我期望的师生关系 预备作业二: 20165221学习基础 ...
- Elasticsearch 5.4.3实战--环境搭建
1. 选择搭建的服务器信息 $ uname -a Linux SA0124 2.6.32-642.11.1.el6.x86_64 #1 SMP Fri Nov 18 19:25:05 UTC 2016 ...
- python3 - 默认参数为列表
默认参数的坑 定义一个函数,传入一个list,添加一个end再返回 1 2 3 def add_end(L=[]): L.append('END') return L 正常调用时,结 ...
- 注解 java.lang.annotation.Inherited 介绍
在Spring Boot中大量使用了@Inherited注解.我们来了解一下这个注解的用法,注解的源码: package java.lang.annotation; /** * Indicates t ...
- dubbo源码分析6——SPI机制中的AOP
在 ExtensionLoader 类的loadFile方法中有下图的这段代码: 类如现在这个ExtensionLoader中的type 是Protocol.class,也就是SPI接口的实现类中Xx ...
- NAND Flash底层原理,SLC MLC TLC比较【转】
转自:https://blog.csdn.net/qq_39560607/article/details/81714145 版权声明:请注明转载自Christa_RJ https://blog.csd ...