前言

本文章向大家介绍在Angular项目中用html2canvas保存页面指定区域截图，该组件还有Vue等版本。遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight)

一、安装

npm install html2canvas --save

二、使用

1.引入库

import html2canvas from 'html2canvas';

2.实现

基础实现


html2canvas(document.getElementById('demo'), {backgroundColor: 'white',useCORS: true, //支持图片跨域scale: 1, //设置放大的倍数
}).then((canvas) => {// 生成图片导出const a = document.createElement('a');a.href = canvas.toDataURL('image/png');a.download = this.title;a.click();
})

如果页面有滚动条的情况可以参考如下（设置height，windowHeight）：

 html2canvas(document.getElementById('demo'), {backgroundColor: 'white',useCORS: true,scale: 1,height: document.getElementById('demo').scrollHeight,windowHeight: document.getElementById('demo').scrollHeight
})

可能出现的问题：
1、背景图片模糊
解决方案：使用img标签来实现background-image的效果

2、图片无法渲染
在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置

总结

该插件切身体会，确实好用，如果使用中遇到问题，可以一起探讨。

Angular页面截图（滚动条显示完整）相关推荐

vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf
问题最开始需要做一个网页的截图,结果发现有滚动条怎么都截取不成功,然后各种百度到了一个办法,就是复制那个节点到body,然后在截取那个复制的节点,小页面实验了一下,成功了好开心,代码是这样的.但是, ...
html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整需要把heigh高度写死 table.render({ elem: ...
html自动缩放不出现滚动条,HTML页面缩小后显示滚动条的示例代码
这里记录一下如何使得HTML页面缩小之后,底部出现滚动条,使得可以通过滚动滚动条来浏览由于界面缩小而被掩盖的地方. 说一下这样做的好处. 首先,一般界面缩小之后不出现滚动条,用户就不能访问被隐藏的地方 ...
Angular页面出不来，显示空白页面。。。
Angular页面出不来,显示空白页面... ng serve -o --port 8888 启动正常, ng build --prod --base-href ./ 打包也正常, 什么错误信息都没有 ...
解决div用了position: fixed后滚动条显示不完整的问题
解决div用了position: fixed后滚动条显示不完整的问题参考文章: (1)解决div用了position: fixed后滚动条显示不完整的问题 (2)https://www.cnblog ...
【代码案例】博客页面设计（附完整源码）
博客页面设计博客列表页实现导航栏实现版心实现个人信息实现博客列表实现博客正文页引入导航栏.版心.个人信息实现博客正文实现博客登录页引入导航栏实现版心和登录框实现博客编辑页引入 ...
docker history显示完整信息_Docker使用
背景 docker是什么? docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱 ...
SAP Spartacus的登录页面的用户名显示逻辑
SAP Spartacus登录页面如下图所示: 通过login form用户输入的用户名和密码去换取token,拿到token后,调用另一个API,将token作为Authorization字段输入: ...
asp.net core根据用户权限控制页面元素的显示
asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...

Angular页面截图（滚动条显示完整）

文章目录

前言

一、安装

二、使用

1.引入库

2.实现

总结

Angular页面截图（滚动条显示完整）相关推荐

最新文章

热门文章