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. [CF] 37 E. Trial for Chief

    如果固定了一个中心,那么只需要考虑从它开始最远染到的那些点究竟染了几次. 上下左右不同的点连1边,相同的连0边,跑单源最短路就可以啦. lyd讲的是统计到最远黑点+1的最小值,但是#58数据全是白点, ...

  2. c++_等差素数列

    标题:等差素数列 2,3,5,7,11,13,....是素数序列.类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列.上边的数列公差为30,长度为6. 2004年 ...

  3. debian swoole环境

    debian 9.8 #目录 /lnmp/soure #软件下载位置 /lnmp/data #测试程序位置 安装php-7.3.3 #卸载apt安装的 apt-get autoremove php7* ...

  4. 关于最新版本react-native0.59.x构建的问题解决方案

    react-native的版本更新是真的快,几乎几天就是一个小版本,然而在这个过程中,对于新手来说,成功构建一个,并跑起来的项目,还是有一定难度的,各种问题,一不小心,你就会发现你的时间全部都浪费在了 ...

  5. AnjularJs-Select添加数据并设置默认值

    html中 <select name="book_classify" class="all_list_btn" ng-model="select ...

  6. Android开发——流量统计

    1. 获取应用UID 在设备的proc目录下我们可以看到一些比较熟悉的目录/文件,比如data,system,cpuinfo(获取CPU信息)等,其中uid_stat的各个以应用Uid命名的目录下,便 ...

  7. NGINX模块(一)

    [NGINX核心模块] 1.主模块 该模块包含一些Nginx的基本控制功能. 指令1:daemon 语法:daemon on | off 默认值:on daemon off; 说明:生产环境中不要使用 ...

  8. poj1523求割点以及割后连通分量数tarjan算法应用

    无向图,双向通道即可,tarjan算法简单应用.点u是割点,条件1:u是dfs树根,则u至少有2个孩子结点.||条件2:u不是根,dfn[u]=<low[v],v是u的孩子结点,而且每个这样的v ...

  9. P1455 搭配购买

    洛谷——P1455 搭配购买 题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商 ...

  10. grunt安装,配置记录

    进了新的公司,需要重构一个项目,从头开始.本人患懒癌已久,一直没有写博客的打算,也是因为资质还比较浅,写不出什么富有涵养的内容,后来想了想,就当自己的笔记吧.这次从新开始,未尝不是一个博客开始的好时机 ...