最近做项目中遇到要把整个页面保存为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. (MonoGame从入门到放弃-2) 初识MonoGame

    上一节记录了大致的搭建MonoGame的环境,默认大家都是都是使用过Visual Studio的,没使用过的话,可以去https://www.visualstudio.com/下载一个试试,社区版免费 ...

  2. 上帝之眼APP——实时定位监控、即时通讯

    项目地址 https://github.com/guoyaohua/GodsEYE 开发环境 Android studio 2.3.1 极光推送IM SDK 百度鹰眼SDK 背景介绍 定位监控系统,不 ...

  3. 终于，我也要出一本C#的书了 - 我的写作历程与C#书单推荐

    我之前的面试题停了很久,是因为 - 我写书去了. 前言 我于2012年3月开始工作,到现在马上就满六年了.这六年里,我从一个连Sql server是什么都不知道,只会写最简单的c#的程序员开始做起,一 ...

  4. Redis多服务器负载均衡的实现

    集群是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器.集群配置是用于提高可用性和可缩放性. 上图是三个主服务 ...

  5. android DecorView深入理解

    开发中,通常都是在onCreate()中调用setContentView(R.layout.custom_layout)来实现想要的页面布局.页面都是依附在窗口之上的,而DecorView即是窗口最顶 ...

  6. 如何编译linux第一个模块 hellomod.ko

    Linux下的驱动程序也没有听上去的那么难实现,我们可以看一下helloworld这个例子就完全可以了解它的编写的方式! 我们还是先看一个这个例子,helloworld 1. [代码]hellowor ...

  7. plx9030触发pci中断

    if(((SWAB_16(PLX_INT(0x4C)))&0x04)==0x04) { ErrNo = *(UINT16*)(g_MemBase+0XFFFE*2); /*logMsg(&qu ...

  8. SQL注入攻击三部曲之高级篇

    SQL注入攻击三部曲之高级篇 经过了入门篇和进阶篇的学习,相信诸位想要破解一般的网站是没有什么问题了,但是先别得意.正所谓学海无涯,技术的进步也是没有止境的.SQL注入是一个看起来简单,但是变数很多的 ...

  9. freemarker报错之十四

    1.错误描述 <html> <head> <meta http-equiv="content-type" content="text/htm ...

  10. Invalid property 'driver_class' of bean class

    1.错误描述 INFO:2015-05-01 13:06:07[localhost-startStop-1] - Initializing c3p0-0.9.2.1 [built 20-March-2 ...