最近做项目中遇到要把整个页面保存为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. 机器学习实战 之 KNN算法

    现在 机器学习 这么火,小编也忍不住想学习一把.注意,小编是零基础哦. 所以,第一步,推荐买一本机器学习的书,我选的是Peter harrigton 的<机器学习实战>.这本书是基于pyt ...

  2. 使用Netbeans内置的Git工具

    在 NetBeans IDE 中使用 Git 支持 NetBeans IDE 为 Git 版本控制客户端提供支持.通过利用 IDE 的 Git 支持,您可以从 IDE 内的项目中直接执行版本控制任务. ...

  3. OO(Object Oriented)

    封装.继承.多态. 封装:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别.封装就是将抽象得到的数据和行为相结合,形成一个有机的整体,也就是将数据与操作数据的代码进行有 ...

  4. Codeforces785E - Anton and Permutation

    Portal Description 对一个长度为\(n(n\leq2\times10^5)\)的数列\(a\)进行\(m(m\leq5\times10^4)\)次操作,数列初始时为\(\{1,2,. ...

  5. Socket 参数笔记

    //服务端@RunWith(JUnit4.class) public class ServerSocketTest { @Test public void testServer() throws IO ...

  6. ActiveMq笔记1-消息可靠性理论

    原博客:http://shift-alt-ctrl.iteye.com/blog/2020182 https://mp.weixin.qq.com/s/h74d6LtGB5M8VF0oLrXdCA 我 ...

  7. 自己编写的仿京东移动端的省市联动选择JQuery插件

    概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...

  8. 嵌入式Linux引导过程之1.1——Xloader的xloader.lds

    本文中的所有代码版本都是基于ST的SpearPlus开发板的. xloader是在系统上电之后,执行完ROM中的frimware后最先开始执行的用户程序,它的体积很小,执行的功能也很简单,主要是对系统 ...

  9. DriverStudio 和 WDF驱动 通过GUID获取设备句柄的差别

    DriverStudio /***************************************************************************** * 功能: 通过 ...

  10. memcache 查看memcache的运行状态

    memcache的运行状态可以方便的用 stats 命令显示. 首先用telnet 127.0.0.1 11211这样的命令连接上memcache,然后直接输入stats就可以得到当前memcache ...