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 '%关键字%'
随机推荐
- [模板] 动态ST表
ST表本身是不可修改的. 如果考虑增加一个数,可以把ST表反过来写,即f[i][j]表示i往前1<<j个数,一个数最多影响logn个数,常数非常小. #include<iostrea ...
- Centos7 安装 MySQL8以及远程访问的配置
Centos7 安装MySQL8 1. 添加MySQL8的本地源 执行以下命令获取安装MySQL源 [root@virde ~]# wget https://repo.mysql.com//mysql ...
- 文本三剑客之grep
接受正则表达式,按行匹配,将会过滤出匹配的所有行 格式: grep [OPTION]... PATTERN [FILE]... 可以看出,grep后可以同时接多个文件 选项OPTIO ...
- linux配置网桥
实现环境: centos7 Linux devstack01 3.10.0-693.el7.x86_64 1.创建br配置文件,ifcfg-br2 cp ifcfg-br0 ifcfg-br2 2 ...
- angularJS transclude
参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...
- SpringMVC的删除功能
Dao层 package net.roseindia.dao; import java.util.Date; import java.util.List; import net.roseindia.m ...
- 大数据学习——JAVA采集程序
1 需求 从外部购买数据,数据提供方会实时将数据推送到6台FTP服务器上,我方部署6台接口采集机来对接采集数据,并上传到HDFS中 提供商在FTP上生成数据的规则是以小时为单位建立文件夹(2016-0 ...
- python024 Python3 实例
Python3 实例 以下实例在 Python3.4.3 版本下测试通过: Python Hello World 实例 Python 数字求和 Python 平方根 Python 二次方程 Pytho ...
- python009 Python3 列表
Python3 列表序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推.Python有6个序列的内置类型,但最常见的是 ...
- centos配置mutt跟msmtp发送邮件
一.安装mutt yum install mutt 二.配置mutt vi /etc/Muttrc 在里面找到下面几行,并将内容修改为你自己的内容(下面几行分布在不同位置,请耐心查找,记得去掉它行首的 ...