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. 数组合并--php

    常用的合并数组方法有以下几种: 1  array_merge 2  '+' 3  array_merge_recursive 下面是一段对比的代码 $array1 = array(2,4," ...

  2. docker-machine 快速搭建docker环境

    环境:腾讯云测试成功 1.条件:本地主机A和远程主机B 2.远程主机B,配置免密登录 1,在本地主机A上生成公钥和私钥,生成命令:ssh-keygen -t rsa 私钥:id_rsa 公钥:id_r ...

  3. Linux文件查找find和locate

    目 录 第1章 locate文件查找    1 1.1 概述    1 1.2 locate文件查找的特性    1 第2章 文件查找概述    1 第3章    1 3.1 文件名查找    1 3 ...

  4. tornado框架基础08-sqlalchemy表关系和简单登录注册

    01 一对一表关系 Module 需要先创建对应的 Module ,这里采用之前建立好的 User 和 UserDetails relationship from sqlalchemy.orm imp ...

  5. 第九节:pandas打印设置

    get_option() :获取系统默认设置选项: set_option() :设置系统设置选项.

  6. Python利用flask sqlalchemy实现分页效果

    Flask-sqlalchemy是关于flask一个针对数据库管理的.文中我们采用一个关于员工显示例子. 首先,我们创建SQLALCHEMY对像db. from flask import Flask, ...

  7. Python+fiddler(基于Cookie绕过验证码自动登录)

    案例:使用Cookie绕过百度验证码自动登录账户 步骤: 1.浏览器进入百度首页,点击登录按钮,输入相关信息(注意:暂时不要点击登录按钮) 2.进入fiddler,首先获取证书,Tools--> ...

  8. 使用using current logfile实现DG备库实时更新

    DG1是主库,DG2是备库:运行在最大可用模式. 实验一:未使用using current logfile参数时,备库在最大可用模式下,不能实时同步备库的更新 -此时需要等待主库进行归档---侧面证明 ...

  9. iOS-runtime-objc_setAssociatedObject(关联对象以及传值)

    例子: static const char kRepresentedObject; - (IBAction)doSomething:(id)sender { UIAlertView *alert = ...

  10. POJ1159:Palindrome【dp】

    题目大意:给出一个字符串,问至少添加多少个字符才能使它成为回文串? 思路:很明显的方程是:dp[i][j]=min{dp[i+1][j],dp[i][j-1],dp[i+1][j-1](str[i]= ...