将WEB页面直接导出为pdf文件是经常会用到的一个功能，尤其是各种报表系统。总结了一下目前几种主流的做法：

  1. 在后端用代码生成pdf文件，比如iText一类；

  2. 在后端抓取页面并生成pdf文件，比如phantomjs一类；

  3. 在前端用js直接生成pdf文件；

方案3的优势在于前端直接生成，所见即所得。今天要探索的就是html2canvas和jspdf，前者用于将页面元素render生成canvas，后者用于将canvas生成pdf文档。需要注意的是，这种方法对IE系列支持不好。

html2canvas的主页：http://html2canvas.hertzen.com/

jspdf的主页：https://parall.ax/products/jspdf

两者的使用都比较简单，网上的文章很多，但是对于长网页导出，jspdf是不支持分页的，目前有一种做法是addImage时控制起始纵坐标为负值，然后超出页面底边的自动隐藏，就达到显示上的分页效果了，但这种方法无法给pdf页面留页边距，因此本文主要针对分页与页边距进行探索。

基本思路是对得到的canvas进行切割，按A4纸大小并留边距后的比例进行剪裁，切出一页一页的内容来，再分别加到pdf中。上个DEMO：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>测试PDF导出</title>

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <script src="js/html2canvas.min.js"></script>

     <script src="js/jspdf.min.js"></script>

     <style>

     html,body { margin:0; padding:0; }

     #page ul { padding:0;list-style:none; }

     #page li { line-height:110px;color:#fff;padding-left:10px; }

     .c0 { background-color:#ea644a; }

     .c1 { background-color:#f1a325; }

     .c2 { background-color:#38b03f; }

     .c3 { background-color:#03b8cf; }

     .c4 { background-color:#bd7b46; }

     .c5 { background-color:#8666b8; }

     </style>

     <script>

     function exportPdf() {

         var element = document.getElementById("page");

         html2canvas(element, {

             logging:false

         }).then(function(canvas) {

             var pdf = new jsPDF('p', 'mm', 'a4');    //A4纸，纵向

             var ctx = canvas.getContext('2d'),

                 a4w = 190, a4h = 277,    //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277

                 imgHeight = Math.floor(a4h * canvas.width / a4w),    //按A4显示比例换算一页图像的像素高度

                 renderedHeight = 0;

             while(renderedHeight < canvas.height) {

                 var page = document.createElement("canvas");

                 page.width = canvas.width;

                 page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能内容不足一页

                 //用getImageData剪裁指定区域，并画到前面创建的canvas对象中

                 page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);

                 pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));    //添加图像到页面，保留10mm边距

                 renderedHeight += imgHeight;

                 if(renderedHeight < canvas.height)

                     pdf.addPage();//如果后面还有内容，添加一个空页

                 delete page;

             }

             pdf.save('content.pdf');

         });

     }

     function generateData() {

         var html = [];

         html[html.length] = '<ul>';

         for(var i = 0;i < 20;++i) {

             html[html.length] = '<li class="c';

             html[html.length] = i % 6;

             html[html.length] = '">这是第';

             html[html.length] = i;

             html[html.length] = '行</li>';

         }

         html[html.length] = '</ul>';

         document.getElementById('page').innerHTML = html.join('');

     }

     </script>

 </head>

 <body onload="generateData()">

     <button onclick="exportPdf()">导出pdf</button>

     <div id="page"></div>

 </body>

 </html>

核心的是exportPdf这个方法 ，感兴趣的同学可以参考。生成的pdf效果如图，可以看到分页和页边距效果：

页面直接导出为PDF文件，支持分页与页边距的更多相关文章

  1. 把页面上的图表导出为pdf文件，分享一种请求下载文件的方法

    最近客户提出一个需求,就是把页面上的图表导出为pdf文件. 找了很多资料.终于有了点头绪.最主要是参考了HighCharts的做法.http://www.hcharts.cn/ 实现原理:把页面图表的 ...

  2. Django分析之导出为PDF文件

    最近在公司一直忙着做exe安装包,以及为程序添加新功能,好久没有继续来写关于Django的东西了….难得这个周末清闲,来了解了解Django的一些小功能也是极好的了~ 那今天就来看看在Django的视 ...

  3. Studio for Winforms FlexGrid:导出到 PDF 文件

    本篇文章主要介绍如何导出 FlexGrid 到 PDF 格式文件.本文源于论坛用户,有多个用户提出如何把 FlexGrid 导出到 PDF 文件的需求.在这里共享给大家. 当前,ComponentOn ...

  4. 文本导出到pdf文件

    程序中数据导出是经常有的需求,今天学习把文本导出到pdf文件.主要是用QPrinter,QPainter TextEditToPdf::TextEditToPdf(QWidget *parent, Q ...

  5. 文本导出到pdf文件（使用QPrinter和QPainter和QTextDocument）

    程序中数据导出是经常有的需求,今天学习把文本导出到pdf文件.主要是用QPrinter,QPainter TextEditToPdf::TextEditToPdf(QWidget *parent, Q ...

  6. react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项

    react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项 之前做了一个需求,在注册账号的时候,让用户同意服务条款, 服务条款是一个PDF文件, 这就需要在react内加 ...

  7. 怎样把PDF文件中的一页提取出来

    现在随着网络科技的发展在网上找资源找文件就像家常便饭一样,但是有很多文件下载完成之后只有几页是需要的这时候就很困惑了,这么多怎么才能看完啊.这样为了不浪费时间可以将有用的一页提取出来,进行使用,那怎样 ...

  8. 【php导出pdf文件】php将html 导出成pdf文件（MPDF60），支持完美分页，注意是完美！！

    1.使用 MPDF60 包 2.防止中文乱码:修改MPDF/MPDF60/config.php中 $this->autoLangToFont = true; $this->autoScri ...

  9. freemarket+itext+springboot将html静态页面渲染后导出为pdf文件

    1.maven依赖 <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf& ...

随机推荐

  1. Python中使用requests和parsel爬取喜马拉雅电台音频

    场景 喜马拉雅电台: https://www.ximalaya.com/ 找到一步小说音频,这里以下面为例 https://www.ximalaya.com/youshengshu/16411402/ ...

  2. oracle 利用序列与触发器实现列自增

    实现步骤:先创建序列,后创建触发器 1.创建序列 create sequence 序列名 increment start maxvalue ; 2.创建触发器 create or replace tr ...

  3. layui 集成第三方和自定义组件到模块规范

    1.新建一个layui.extend.js文件,页面调用时这个文件放到layui.js后面. 2.基础的配置卸载config中,扩展的组件写入extend,组件的路径是相对于config下base的路 ...

  4. HTTP中的301、302、303、307、308

    结论 3XX开头的HTTP状态码都表示重定向的响应. 301.308是永久重定向:302.303.307是临时重定向. 301.302是http 1.0的内容,303.307.308是http1.1的 ...

  5. js个人笔记简记

    正则表达式 创建正则表达式的两种方法:   Var reg = new RegExp(‘’) Var reg = / a/ 后面三个参数g:全局匹配 i:不区分大小写 m:多行匹配 开头结尾有用 常见 ...

  6. 【LeetCode】437. 路径总和 III

    437. 路径总和 III 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点 ...

  7. git在idea中的冲突解决（非常重要）

    1.什么是冲突 冲突是指当你在提交或者更新代码时被合并的文件与当前文件不一致.读起来有点绕,结合下面的案例理解. 从上面对冲突的定义来看,冲突时发生在同一个文件上的. 2.生产上冲突的场景 常见冲突的 ...

  8. semantic功能介绍

    semantic功能介绍 gnu Semantic Manual 1,代码自动补全 3,代码导航 启动semantic功能:(semantic-mode 1) 1,Semantic mode 是辅助模 ...

  9. c# 第40节 密封类、密封方法

    本节内容: 1:密封的存在意义 2:密封方法的实现 1:密封的存在意义 2:密封方法的实现 class2::父类 class Class2 { public virtual void show() { ...

  10. 攻防世界web-unserialize3

    漏洞编号CVE-2016-7124 详情  https://xz.aliyun.com/t/378 题目源码 class xctf{ '; public function __wakeup(){ ex ...