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 '%关键字%'
随机推荐
- [LUOGU] P2704 炮兵阵地
题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队. 一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示), 也可能是平原(用"P&q ...
- linux 如何查看硬盘大小,内存大小等系统信息及硬件信息
一.linux CPU大小[root@idc ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuin ...
- ES5的数组方法
参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Array.prot ...
- python中unicode, hex, bin之间的转换
python中unicode, hex, bin之间的转换 背景 在smb中有个feature change notify, 需要改动文件权限dacl,然后确认是否有收到notify.一直得不到这个d ...
- 【实验吧】Just Click
拿到答案需要正确地点击按钮 格式:simCTF{ } 解题链接: http://ctf5.shiyanbar.com/re/rev4.exe 由于最近在学数据库是c#编程,发现是c#,于是用.net ...
- cherrypy & gevent patch
给cherrypy 打gevent WSGIServer的patch 1. patch Serving 类 2. 关闭python的原生WSGIServer 具体使用例子参考 我的开源项目 http ...
- PTA 03-树2 List Leaves (25分)
题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/666 5-4 List Leaves (25分) Given a tree, you ...
- C 题 KMP中next[]问题
题目大意: 找到能够进行字符串匹配的前缀 这题只要一直求next,直到next为0停止,记得答案是总长减去next的长度 #include <iostream> #include < ...
- 牛客网暑期ACM多校训练营(第九场)D
链接:https://www.nowcoder.com/acm/contest/147/D来源:牛客网 Niuniu likes traveling. Now he will travel on a ...
- RedirectAttributes
RedirectAttributes是Spring mvc 3.1版本之后出来的一个功能,专门用于重定向之后还能带参数跳转的 他有两种带参的方式: 第一种: attr.addAttribute(&q ...