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. Hibernate-04

    HQL查询语法 查询:public class Dome{ Session session = HibernaeUitls.openSession(); Transaction tx = sessio ...

  2. Spring中RestTemplate的使用方法

    一.REST 在互联网中,我们会通过请求url来对网络上的资源做增删改查等动作,这里的请求包含两部分:动词,主要包括增.删.改.查:名词,就是网络中的各种资源.传统的非REST风格的请求方式是把动词和 ...

  3. POI导出,开发中经常会遇到数据导出这样的问题,下面是我在开发中采用的解决方法,大家可以参考,具体的实现害的结合你自身的业务逻辑

    @RequestMapping(value = "/drawPayFailExport",method = RequestMethod.GET,produces = "a ...

  4. 我的java web之路(安装)

    所有的软件下载完,陪完jdk之后,迎来了一系列的安装工作... 1.安装SQL Server 2005 首先,打开ISS功能,控制面板->程序->打开或关闭windows功能 注意红框内的 ...

  5. Fidder详解-工具简介(保存会话、decode解码、Repaly、自定义会话框、隐藏会话、会话排序)

    前言 本文会对Fidder这款工具的一些重要功能,进行详细讲解,带大家进入Fidder的世界,本文会让你明白,Fidder不仅是一个抓包分析工具,也是一个请求发送工具,更加可以当作为Mock Serv ...

  6. 如何安装python包

    安装python包有两种方法: 使用Python包管理器pip工具 在Linux系统中,首先 yum install python-pip 然后就可以欢快的pip install *** 啦 源代码安 ...

  7. Binary mod and divide(模拟+大数)

    描述 Most people know that the binary operations. Do you know the binary mod and divide? Now give the ...

  8. hdu4514(非连通图的环判断与图中最长链)(树的直径)

    湫湫系列故事——设计风景线 随着杭州西湖的知名度的进一步提升,园林规划专家湫湫希望设计出一条新的经典观光线路,根据老板马小腾的指示,新的风景线最好能建成环形,如果没有条件建成环形,那就建的越长越好.  ...

  9. idea与eclipse项目相互导入的过程

    idea项目导出到桌面 很简单,直接去项目所在目录考出即可,但是考出的项目往往都特别大,这是因为考出之前  我们不要忘记把idea的输出目录删除 每次启动服务器运行idea项目的时候  都会有一个输出 ...

  10. Python基础教程笔记——第5章:条件,循环和其他语句

    5.1 print和import的更多信息 1. print()3.0之后print不再是语句,而是函数, >>> print('udg',12,13)   udg 12 13 &g ...