html2canvas 导出包含滚动条的内容
import html2canvas from 'html2canvas';
exportPDF() { // 导出为 pdf
let dom = document.querySelector('yourcssselector');
let height = parseInt(dom.style.height) + + 'px';
window.d = dom;
let that = this;
setTimeout(function() {
html2canvas(dom,{
backgroundColor:'#fff',
useCORS : true,//保证跨域图片的显示
allowTaint :false,
height: height, //canvas 窗口的高度
windowHeight: height, // 获取y方向滚动条中的内容
y: height, // 页面在垂直方向的滚动距离
}).then(function(canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
window.location.href= imgUri; // 下载图片
});
}, );
}
如何设置部分内容不导出?
在 html 元素中设置:data-html2canvas-ignore={true}
同类插件:dom-to-image 此插件可以截取超长页面
html2canvas 导出包含滚动条的内容的更多相关文章
- maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中
今天终于把maven-bundle-plugin不能导出META-INF中的内容到Export-Package中的问题解决了,因为用到的第三方JAR包需要加载META-INF/XX/XX.xml这个内 ...
- 测试浏览器最多能包含Cookie的个数和Cookie中包含的最多内容
public class CookieTestServlet extends HttpServlet { public void doGet(HttpServletRequest request, H ...
- Paragraph 对象'代表所选内容、范围或文档中的一个段落。Paragraph 对象是 Paragraphs 集合的一个成员。Paragraphs 集合包含所选内容、范围或文档中的所有段落。
Paragraph 对象'代表所选内容.范围或文档中的一个段落.Paragraph 对象是 Paragraphs 集合的一个成员.Paragraphs 集合包含所选内容.范围或文档中的所有段落. 方法 ...
- css固定div头部 滚动条滚动内容
页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...
- WPF拖动DataGrid滚动条时内容混乱的解决方法
WPF拖动DataGrid滚动条时内容混乱的解决方法 在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况.解决方法就是在Binding的时候给Update ...
- WeihanLi.Npoi 导出支持自定义列内容啦
WeihanLi.Npoi 导出支持自定义列内容啦 Intro 之前也有网友给提出过希望列合并或者自定义列内容的 issue 或请求,起初因为自己做 WeihanLi.Npoi 这个扩展的最初目的是导 ...
- js控制滚动条在内容更新超出时自动滚到底部
//滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:将页面元素所包含的文本内容替换为背景图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 帝国cms 批量删除包含关键字的 内容
删除包含关键字的 内容delete from www_kaifatu_com_ecms_news where playurl like '%关键字%'
随机推荐
- python 06 8/28-8/30
六 函数的返回值,使用return返回数据,可以同时返回多个数据,将会以元组的形式返回到函数的调用处.return 具有返回数据和中止程序的作用! return 后不加任何数据则返回None ,判定为 ...
- 如何实时查看mysql当前连接数?
1.查看当前所有连接的详细资料: ./mysqladmin -uadmin -p -h10.140.1.1 processlist2.只查看当前连接数(Threads就是连接数.): ./mysqla ...
- 【HIHOCODER 1049】 后序遍历
描述 在参与过了美食节之后,小Hi和小Ho在别的地方又玩耍了一阵子,在这个过程中,小Ho得到了一个非常有意思的玩具--一棵由小球和木棍连接起来的二叉树! 小Ho对这棵二叉树爱不释手,于是给它的每一个节 ...
- ACM模板(Java)
模板 Trie HIHOCODER1014 static final int N = (int)1e5+10; static final int SIGMA=(int)27; static int c ...
- 算法导论 第十章 基本数据类型 & 第十一章 散列表(python)
更多的理论细节可以用<数据结构>严蔚敏 看几遍,数据结构很重要是实现算法的很大一部分 下面主要谈谈python怎么实现 10.1 栈和队列 栈:后进先出LIFO 队列:先进先出FIFO p ...
- jQuery 1.9升级指南
http://www.css88.com/archives/5086 原文地址:http://jquery.com/upgrade-guide/1.9/ 翻译的不对或者不通顺的地方欢迎拍砖留言。 概述 ...
- jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
- MySql查询语句的使用实例
一.设计表 1.设计表 查询语句之前先设计四张表:student.teacher.course.score student:sid(学号).sname(姓名).sage(年龄).ssex(性别) te ...
- mysql 分段统计数据
一个简单的分段统计的问题:student 表{id,name,score} 字段,统计各个分数段的人数.规则:60以下不及格,60-80良,80-100优. SELECT sum(CASE when ...
- UVALive 4015 树形dp
题目大意: 从一个根节点出发,走最多 x 的长度,问最多能走过多少个节点,图保证是一棵树 dp[0][i][j] , 表示走从i点为根的子树走过了j个点最后回到 i 最少需要多少时间dp[1][i][ ...