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 导出包含滚动条的内容的更多相关文章

  1. maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中

    今天终于把maven-bundle-plugin不能导出META-INF中的内容到Export-Package中的问题解决了,因为用到的第三方JAR包需要加载META-INF/XX/XX.xml这个内 ...

  2. 测试浏览器最多能包含Cookie的个数和Cookie中包含的最多内容

    public class CookieTestServlet extends HttpServlet { public void doGet(HttpServletRequest request, H ...

  3. Paragraph 对象'代表所选内容、范围或文档中的一个段落。Paragraph 对象是 Paragraphs 集合的一个成员。Paragraphs 集合包含所选内容、范围或文档中的所有段落。

    Paragraph 对象'代表所选内容.范围或文档中的一个段落.Paragraph 对象是 Paragraphs 集合的一个成员.Paragraphs 集合包含所选内容.范围或文档中的所有段落. 方法 ...

  4. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  5. WPF拖动DataGrid滚动条时内容混乱的解决方法

    WPF拖动DataGrid滚动条时内容混乱的解决方法 在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况.解决方法就是在Binding的时候给Update ...

  6. WeihanLi.Npoi 导出支持自定义列内容啦

    WeihanLi.Npoi 导出支持自定义列内容啦 Intro 之前也有网友给提出过希望列合并或者自定义列内容的 issue 或请求,起初因为自己做 WeihanLi.Npoi 这个扩展的最初目的是导 ...

  7. js控制滚动条在内容更新超出时自动滚到底部

    //滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:将页面元素所包含的文本内容替换为背景图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 帝国cms 批量删除包含关键字的 内容

    删除包含关键字的 内容delete from www_kaifatu_com_ecms_news where playurl like '%关键字%'

随机推荐

  1. MySQL配置索引页的合并阈值

    MySQL配置索引页的合并阈值 如果删除行或者通过UPDATE操作缩短行 可以为索引页面配置MERGE_THRESHOLD值. 当delete与update缩短了行长度时,索引页的"page ...

  2. tkinter学习-Lable&Button

    tkinter学习-La&Bu 我的第一个Tkinter程序 Label组件的使用 Button组件的使用 1.我的第一个Tkinter程序 常用的属性: title:设置窗口的标题 geom ...

  3. Python旅途——函数(1)

    函数 简介 到目前为止,我们一直所接触的都是属于面向过程编程,这样的代码会降低代码的可读性,因此引入了函数式编程,在后面我们还会学到面向对象编程. 函数式编程 函数本质:将N行代码拿到别处,并给他起个 ...

  4. pygame试水,写一个贪吃蛇

    最近学完python基础知识,就想着做一个游戏玩玩,于是就在https://www.pygame.org/docs/学着做了个贪吃蛇游戏. 首先要导入模块. import pygame import ...

  5. 十二.GUI

    tkinter模块(tkinter是一个跨平台的PythonGUI工具包): #Tkinter是一个跨平台的Python GUI工具包 import tkinter top=tkinter.Tk() ...

  6. Spring MVC 接入 rabbitMQ

    依赖包 <dependency> <groupId>org.springframework.amqp</groupId> <artifactId>spr ...

  7. source not found

    Eclipse 调试 时, 无论在activity中哪一行打断点.调试时,都会跳转到activity源码中.报错 source not found : 解决办法: ->在调试的线程上 右键单击  ...

  8. 《算法导论》 — Chapter 8 线性时间排序

    序 到目前为止,关于排序的问题,前面已经介绍了很多,从插入排序.合并排序.堆排序以及快速排序,每一种都有其适用的情况,在时间和空间复杂度上各有优势.它们都有一个相同的特点,以上所有排序的结果序列,各个 ...

  9. [Usaco2007 Oct] Super Paintball超级弹珠

    Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 489  Solved: 384[Submit][Status][Discuss] Description ...

  10. BitmapFactory.Options对图片进行缩放

    package com.pingyijinren.helloworld.activity; import android.graphics.Bitmap; import android.graphic ...