最近做项目中遇到要把整个页面保存为PDF文件，网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现。实现的过程是 先用html2canvas.js把html页面转成图片，再用jsPdf.js把图片导出为pdf。

于是做了个小案例来测试这个功能。

<body>

    <!-- PDF -->

    <div class="bb" id="ctn">

        <div class="anliu" id="anliu">生成PDF</div>

    </div>

</body>

<script src="../../Scripts/aps/html2canvas.js"></script>

<script src="../../Scripts/aps/jsPdf.debug.js"></script>

js写法

window.onload =function(){

var downPdf = document.getElementById("anliu");

downPdf.onclick = function() {

   html2canvas(document.body, {

        onrendered: function(canvas) {

                //返回图片URL，参数：图片格式和清晰度(0-1)

                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]

                  var pdf = new jsPDF('', 'pt', 'a4');

                  //需要dataUrl格式

                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

                  pdf.save('tup.pdf');

        }

    });

}

}

1，写完一测试看，报了个错误Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。  于是我换一种方法，把所有图片删掉测试，再点击生成pdf，结果是没问题，这样看来报错的原因是图片引起的。

一查资料是因为图片和页面所在域不同，出现跨域传输的问题，说白了就是要在服务器环境下访问。于是在服务器环境下测试没问题，成功生成pdf文件。

2，html2canvas.js截图不全的问题

把这个测试实现的功能放到项目里面去，遇到了一个新问题，生成的pdf只有页面窗口可见的区域，有滚动条的下面没有生成出来。

于是又找了一下，html2canvas 截取图片不支持高度，会造成只可以截到浏览器可见的，如果出现滚动条则不会截全，所以造成jsPdf.js根据截图生成的pdf出现不全的问题。既然是html2canvas截图的原因引起的那就从这里来解决。

网上看了下别人写的案例，结合自己测试+分析发现，如果截取是body的这个层级，而刚好body设置了overflow: hidden;那超出的部分是永远截取不到的，因为这个节点的dom高就是窗口可见的高度，并不包含滚动条多出来的部分。

于是我把滚动条这一节点的样式，height: auto;让高度给子元素去撑开。 再往上把父节点都去掉overflow: hidden;去掉元素不可见。

看一下引入jquery后，在项目中重新写的js

        var pdfcc = $('.pdf-cc');

        pdfcc.on('click', function (event) {

            html2canvas($("#bb-pdf-ctn"), {

                allowTaint: true,

                height: $("#bb-pdf-ctn").outerHeight(),

                onrendered: function (canvas) {

                    //返回图片URL，参数：图片格式和清晰度(0-1)

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);

                    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]

                    var pdf = new jsPDF('', 'pt', 'a4');

                    //需要dataUrl格式

                    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);

                    pdf.save('pdf.pdf');

                }

            });

        });

3，html2canvas设置了2个新的参数

允许跨域：allowTaint: true,

设置高度：height: $("#bb-pdf-ctn").outerHeight(),

高度就是滚动条这个节点的高度。

OK，就这样搞定滚动条区域截图不全的问题了。

js实现html转pdf+html2canvas.js截图不全的问题的更多相关文章

  1. html2canvas.js网页截图功能

    需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈.其中,都可识别图中的二维码.(二维码过小会识别不出) 首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的im ...

  2. 使用html2canvas.js将HTML生成图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. html2canvas 网页截图 下载 上传

    利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  4. IText&Html2canvas js截图 绘制 导出PDF

    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...

  5. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  6. html2canvas JS截图插件

    github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...

  7. html2canvas.js插件截图空白问题

    发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...

  8. 纯js实现html转pdf

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式.简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf.咋不上天呢--查了一下 ...

  9. 一个在浏览器端将html 转为pdf 的js 插件 jsPDF

    <!DOCTYPE html> <html> <head> <title>test</title> <meta http-equiv= ...

随机推荐

  1. java常用类————Date类

    Date类在Java.util包中. 一.功能介绍:创建Date对象,获取时间,格式化输出的时间. 二.对象创建:1.使用Date类无参数的构造方法创建的对象可以获取本地时间.例如: Date now ...

  2. 【阿里聚安全·安全周刊】科学家警告外星恶意代码|新方法任意解锁iPhone

    本周的七个关键词: 外星恶意代码 丨 任意解锁iPhone 丨  安卓9.0 丨 黑客攻击医疗设备 丨 仙女座僵尸网络 丨  苹果联合创始人被骗比特币 丨JavaScript -1-   [恶意代码] ...

  3. crontab定时任务（centos）

    cron服务是Linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond stop /sbi ...

  4. 1 Python数据类型--

    常见的Python数据类型: (1)数值类型:就是平时处理的数字(整数.浮点数) (2)序列类型:有一系列的对象并排或者排列的情况.如字符串(str),列表(list),元组(tuple)等 (3)集 ...

  5. UVA129

    坑点在于输出格式. 四个字母一个空格,行末没有空格,64个字母换行重新打印. AC代码 #include<cstdio> const int maxn=200; int cnt; int ...

  6. Zookeeper笔记1-CAP/BASE理论

    分布式系统八大谬论: 1.网络相当可靠 2.延迟为0 3.传输带宽是无限的 4.网络相当安全. 5.拓扑结构不会改变 6.必须要有一名管理员 7.传输成本为0 8.网络同质化. 分布式最常出现的问题: ...

  7. web前端开发工程师工资多少

      做web前端开发工程师工资高不高?下面千锋小编为大家分析一下:作为目前互联网行业中的主流技术,Web前端一直是占有重要的地位.尤其是近年来HTML5技术的突飞猛进,使Web前端技术有了更好的发展. ...

  8. Android HotFix动态加载框架介绍

    HotFix(Deprecated) https://github.com/dodola/HotFix 请关注 RocooFix 我重新写了一个RocooFix框架,解决了Nuwa因为Gradle1. ...

  9. R语言︱数据去重

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:unique对于一个向量管用,对于m ...

  10. Srtuts2实现登录界面（不连接数据库）报错（三）

    二月 28, 2014 11:41:20 下午 org.apache.catalina.core.AprLifecycleListener init 严重: An incompatible versi ...