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 '%关键字%' 
随机推荐
- MySQL配置索引页的合并阈值
			MySQL配置索引页的合并阈值 如果删除行或者通过UPDATE操作缩短行 可以为索引页面配置MERGE_THRESHOLD值. 当delete与update缩短了行长度时,索引页的"page ... 
- tkinter学习-Lable&Button
			tkinter学习-La&Bu 我的第一个Tkinter程序 Label组件的使用 Button组件的使用 1.我的第一个Tkinter程序 常用的属性: title:设置窗口的标题 geom ... 
- Python旅途——函数(1)
			函数 简介 到目前为止,我们一直所接触的都是属于面向过程编程,这样的代码会降低代码的可读性,因此引入了函数式编程,在后面我们还会学到面向对象编程. 函数式编程 函数本质:将N行代码拿到别处,并给他起个 ... 
- pygame试水,写一个贪吃蛇
			最近学完python基础知识,就想着做一个游戏玩玩,于是就在https://www.pygame.org/docs/学着做了个贪吃蛇游戏. 首先要导入模块. import pygame import ... 
- 十二.GUI
			tkinter模块(tkinter是一个跨平台的PythonGUI工具包): #Tkinter是一个跨平台的Python GUI工具包 import tkinter top=tkinter.Tk() ... 
- Spring MVC 接入 rabbitMQ
			依赖包 <dependency> <groupId>org.springframework.amqp</groupId> <artifactId>spr ... 
- source not found
			Eclipse 调试 时, 无论在activity中哪一行打断点.调试时,都会跳转到activity源码中.报错 source not found : 解决办法: ->在调试的线程上 右键单击 ... 
- 《算法导论》 — Chapter 8 线性时间排序
			序 到目前为止,关于排序的问题,前面已经介绍了很多,从插入排序.合并排序.堆排序以及快速排序,每一种都有其适用的情况,在时间和空间复杂度上各有优势.它们都有一个相同的特点,以上所有排序的结果序列,各个 ... 
- [Usaco2007 Oct] Super Paintball超级弹珠
			Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 489 Solved: 384[Submit][Status][Discuss] Description ... 
- BitmapFactory.Options对图片进行缩放
			package com.pingyijinren.helloworld.activity; import android.graphics.Bitmap; import android.graphic ... 
