【JS】js将页面下载为图片---angular2中使用html2canvas将数据导出为图片，并下载到本地

最新推荐文章于 2022-04-25 18:28:06 发布
最新推荐文章于 2022-04-25 18:28:06 发布
阅读量776 收藏
点赞数
分类专栏： javascript angular 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42960907/article/details/122565998
版权

1、安装html2canvas

官方网站https://html2canvas.hertzen.com/

npm install --save html2canvas

2、在需要的组件中引入html2canvas

import html2canvas from 'html2canvas';

3、定义方法，将数据转换为canvas

downloadPic
了解本专栏 订阅专栏 解锁全文 超级会员免费看
卸载引擎
关注
专栏目录
订阅专栏
html2canvas导出table,使用html2canvas将HTML表格转换为画布(Convert HTML table to canvas using html2canvas)...
weixin_42345036的博客
06-15 873
使用html2canvas将HTML表格转换为画布(Convert HTML table to canvas using html2canvas)我想将html表转换为pdf。 我尝试过使用jspdf。 它适用于普通表。 但是当表格中有图像时不起作用。 现在我试图至少转换为canvas，然后转换为pdf。 但是当有图像时它也无法工作。button{display:block;height:20px...
angular-sap-html2canvas
05-08
norman-html2canvas node / browserify环绕html2canvas库 包含0.4.1版本： : 在GitHub上构建 访问GitHub上的中央BUILD项目，您可以在其中找到更多信息！ 查看BUILD贡献准则。
angular中html2canvas简单应用
tangguoguozhu的博客
08-22 1964
angular中html2canvas使用记录 官方最新版本 ^1.0.0-rc.7 网上会有一些其他版本不建议使用，用官方版本就好了 项目背景 一个找工作的详情页面，需要把页面截图成海报分享出去，要加上背景图片，这时候就用到了html2canvas 使用html2canvas中的一些注意问题 1.background-image属性设置背景图片，生成出来时图片会模糊： 所以要把背景图片拿出来用css模拟背景图片的样子 <div class="job-cc" id="jobdetail">
使用js将网页导出为图片并下载
weixin_49408113的博客
04-25 3633
将网页导出为图片并保存在电脑客户端
html2canvas 在Angular引入问题
weixin_38391672的博客
10-11 806
之前使用html2canvas的版本是1.0.0-rc.1 并且安装@type/html2canvas,引入方式是 import * as html2canvas from 'html2canvas';这里引用的@type/html2canvas包下面的 升级html2canvs成1.0.0-rc.5 改成 import html2canvas from 'html2canvas';此时引用的是...
angular使用html2canvas生成图片
liucai1018的博客
09-10 3124
1下载依赖：npm install --save(表示保存到package.json中)html2canvas 2在需要使用的组件中引入：import html2canvas from "html2canvas"; 3使用es6语法，直接调用html2canvas进行截图： html2canvas(要转成canvas的元素).then(canvas=>{回调执行的代码}) h...
canvas转成为图片并下载为本地图片文件
lit_finger的博客
01-13 4717
本次需求为echarts图表，点击下载按钮后可获得当前视图的png图片 echarts官方API里有个方法，可将chart转换为base64格式的url 这里我本地使用canvas模拟，和echarts时一个道理，html代码如下
html2canvas生成的图片数据太大导致前台有值传到后台为null
Sun_of_Rainy的博客
01-29 4194
折腾了一天，终于找到前台有值，后台拿到却是null的原因了，多亏了同事的帮忙 原因是生成的图片数据太大了，ajax请求提交的数据大小是有限制的 做了个测试，将图片数据也就是下面代码中的dataUrl数值改小之后就可以正常传到后台了 function saveUserTemplateAsImageData(){ debugger; var userTemplateId...
angular8中，用html2canvas+jspdf 实现页面下载pdf（解决了中文问题和页边距问题）
weixin_41875025的博客
07-27 1394
下载jspdf 和 html2canvas： npm install jspdf --save npm install html2canvas --save 在当前使用 的ts文件中引入 import * as jsPdf from ‘jspdf’ import html2canvas from ‘html2canvas’ import { Component, OnInit ,Input, Query} from '@angular/core'; //引入生成pdf的插件 import * as jsP
html2canvas.js插件
05-11
js截屏（或截取某个标签）生成图片的插件
基于html2canvas将当前页面保存为图片Demo
06-26
基于html2canvas将当前页面保存为图片Demo。压缩包中包含html2canvas插件脚本及一个简单的调用Demo，代码内容一目了然且附有步骤注释，很容易上手。
html2canvas下载图片保存到本地（angular为例）
weixin_30446197的博客
08-05 682
1、命令：npm install --save html2canvas 2、在angular.json中引入 3、在typings.d.ts中定义下 4、html代码 <divid="capture">页面内容（要保存部分id为capture）</div> <a #downLoadImg class="down-load" hre...
angular5 引入 html2canvas 组件库 实现下载和打印的功能
weixin_30270889的博客
03-18 478
1. angular5 引入 　　npm install --save html2canvas 2. component或者service中使用(angular5使用typescript) import * as html2canvas from 'html2canvas'; 下载的方法实现如下:(es6 promise方式实现) #element: 页面某个元素 如div的class ...
前端利用html2canvas生成图片并且下载
coucouxie的博客
11-11 1400
项目需求前端，以当前的某个dom节点为资源生成对应的图片并且下载 代码如下 <Button type="upload" text="导出公示牌" color="#0EA249" width="110px" @click="exportImage" /> methods:{ dataURLToBlob(dataurl) { //ie 图片转格式 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
js实现导出页面成图片/PDF
qq_42373684的博客
05-07 1366
安装 npm install html2canvas --save npm install jspdf --save 导入 import html2canvas from 'html2canvas'; import JsPDF from 'jspdf' 导出图片 将要导出的部分限制一下，后面附带一个a标签 <div class="..." ref="imageDom" id="image...
html2canvas.js 下载图片到本地
Julie_Go的专栏
01-20 643
使用js插件html2canvashttp://html2canvas.hertzen.com/ 使用场景：把html页面标签id="saveImgBox" 的内容，转为规定尺寸的图片，下载到本地 <!--html--> <style> #saveImgBox{ position:fixed; left:0; top:0; opa...
angular2中使用html2canvas将div标签中的内容导出为图片，并下载本地
神zhi殇的博客
09-12 1647
参考： https://segmentfault.com/a/1190000012477096
html2canvas 截图div_H5快照截图[html2canvas]+图片下载
weixin_39680678的博客
12-01 304
题记------年轻是我们唯一拥有权利去编织梦想的时光。需求来源项目开发过程中，你可能会遇到用户需要保存当前页面的内容，但是用户又不想自己通过手机系统手动截图；又或者，你想分享当前页面的内容，把它当做一个海报分享，那这个时候就需要通过程序员来帮你完成前期操作，这个时候就用到了H5快照功能，具体情况如下。html源码 <div class="contentBox" id="...
ng-book2：Angular 2入门指南 - 最新版r41
《ng-book 2 - The Complete Book on Angular 2 - r41 (Angular 2.0.0 final)》是一本全面学习Angular 2框架的权威指南，由Felipe Coury、Ari Lerner、Nate Murray和Carlos Taborda合作编写，适用于初学者和进阶...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卸载引擎

如果对您有帮助，请赏个饭吃

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值