最近做项目中遇到要把整个页面保存为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. CentOS 6安装Oracle报错解决方案

    1. Preparing to launch Oracle Universal Installer from /tmp/OraInstall2017-05-23_04-18-48AM. Please ...

  2. 2018-03-03-解决win下凭据删除不干净而无法登录共项目录的问题

    layout: post title: 2018-03-03-解决win下凭据删除不干净而无法登录共项目录的问题 key: 20180303 tags: GIT 版本管理 modify_date: 2 ...

  3. 阿里巴巴十年Java架构师分享，会了这个知识点的人都去BAT了

    1.源码分析专题 详细介绍源码中所用到的经典设计思想,看看大牛是如何写代码的,提升技术审美.提高核心竞争力. 帮助大家寻找分析源码的切入点,在思想上来一次巨大的升华.知其然,并知其所以然.把知识变成自 ...

  4. HDU - 2160 递推

    思路:dp(i)表示第i天的猪的数量,g(i)表示第i天新出生的猪的数量,d(i) = d(i-1) * 2 - g(i-2), g(i) = d(i-1) AC代码 #include <cst ...

  5. 如何解决使用Gradle时出现的jar包冲突

    前言 在我之前使用Gradle的博文中已经提到,Gradle对依赖的管理是比较智能的,如果有两个包依赖于相同的包,而版本不同的时候,Gradle会进行自动的选择,从而避免jar包的冲突. 也就是说,在 ...

  6. python模拟登录浙江大学彩云库

    前言: 群里一位朋友叫我帮他写 一个模拟登录的. 代码: import requests import time url="http://yk3.gokuai.com/web/index&q ...

  7. 学习PHP的必备开发工具

    对于PHP开发者,在互联网上有很多可用的开发工具,但对于初学者不知道哪个php开发工具比较好,找到一个合适的PHP开发工具是很难的,需要花费很多的时间精力.所以,今天常青春工作室就为初学者推荐几个最好 ...

  8. MySQL参数max_connect_errors分析释疑

      最近一MySQL服务器,由于一些特殊因素遇到"ERROR 1129 (00000): Host 'xxx' is blocked because of many connection e ...

  9. dedecms 在首页调取文章内容

    方法一:arcticle 标签 加上channeleid {dede:arclist' addfields='body' channelid='1'}[field:body/]{/dede:arcli ...

  10. Java Web项目部署Tomcat运行出错

    1.在部署Java Web项目的过程中,启动Tomcat出现报错提示 具体报错如下: Could not load the Tomcat server configuration at \Server ...