将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. Vue入门、插件安装

    一.Vue 1.什么是Vue? (1)官网地址: https://cn.vuejs.org/ (2)Vue是一个渐进式的JavaScript框架.采用自底向上增量开发的设计.可以简单的理解为Vue是一 ...

  2. 「SAP 技术」SAP MM 物料主数据利润中心字段之修改

    SAP MM 物料主数据利润中心字段之修改 近日,收到业务部门报的一个问题,说是MM02去修改物料的利润中心字段值,系统报错说物料库存存在,不让修改. 笔者查询了该物料的库存,当期库存并不存在.MMB ...

  3. 重新认识快速视图窗体(Quick View Form)

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复158或者20151009可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 在我的 微软Dynamics C ...

  4. 什么是技术规划（TPP)?

    什么是技术? 1.技,巧也. ——<说文> 2.为了人类的目的而操纵自然世界的工具.机器.系统和技巧的集合. ——梅里特·罗·史密斯 3.人类都在利用自然和改造自然的过程中积累起来并在生产 ...

  5. win7个性化不能换界面:此页面上的一个或多个设置已被系统管理员禁用,关机里的切换用户和锁定为灰色

    win7个性化不能换界面:此页面上的一个或多个设置已被系统管理员禁用,关机里的切换用户和锁定为灰色 找到注册表 cmd-regedit HKEY_CURRENT_USER\Software\Micro ...

  6. Linux:目录的查找

    搜索文件与目录 find [查找范围] [查找条件表达式] 常用的选项 -name 按名称查找,允许使用通配符 -type 按文件类型查找 文件类型包括: 普通文件 f 目录 d 块设备文件 b 字符 ...

  7. postman---postman参数关联

    我们做接口测试的时候都会遇到一个场景,就是参数关联,所谓的参数关联就是上一个参数的返回值用于下一个参数的请求中,通过python中requests我们知道如何请求,那么通过postman如何请求? 参 ...

  8. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  9. Jenkins显示reportng测试报告

    在搭建Jenkins自动化测试平台后,我们点击立即构建就可以运行测试用例了,但没有地方查看测试报告,现在写这篇博客总结怎么在Jenkins显示reportng测试报告. 在maven项目配置repor ...

  10. 洛谷 P4316 绿豆蛙的归宿

    洛谷 P4316 绿豆蛙的归宿 洛谷传送门 题目背景 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 题目描述 给出一个有向无环图,起点为1终点为N,每条边都有一个长度, ...