将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. Create an XAF Application 创建一个XAF应用程序

    This topic describes how to use the Solution Wizard to create XAF applications and specify a connect ...

  2. webpack打包配置禁止html标签全部转为小写

    用webpack打包页面,发现html中特别写的用来给后端识别的大写标签全部被转为了小写标签,这时候需要将加一个配置 ,caseSensitive:true ,禁止大小写转换. webpack配置: ...

  3. 如何通过纯javascript实现表单提交

    通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交.有些地方,我想使用纯JS实现,比方简单的登陆跳转.话不多说,看原代码, laravel中的HTML部分,如果不 ...

  4. JavaScript初探 二 （了解数据）

    JavaScript初探 (二) JavaScript 事件 HTML事件 HTML事件是可以在浏览器或用户做的某些事情 HTML事件的例子: HTML网页完成加载 HTML输入字段被修改 HTML按 ...

  5. Android开发：getSupportFragmentManager()不可用

    getSupportFragmentManager()这个函数不可用显然是因为activity继承错误了,因此我们需要将整个类的所继承的类改变即可 public class MainActivity ...

  6. Android监视器概述

    还望支持个人博客站:http://www.enjoytoday.cn Android监视器可帮助您分析应用程序的性能,以便您优化,调试和改进它们. 它可以让您从硬件设备或Android模拟器监控应用程 ...

  7. Linux—运行yum报错：No module named yum

    产生原因:yum基于python写的,根据报错信息提示,是yum的python版本对应不上目前python环境的版本导致的.也就是说 有人升级或者卸载了python. 解决方式: # 查看yum版本 ...

  8. [Go] 利用channel形成管道沟通循环内外

    这个要解决的问题是,比如如果有一个大循环,取自一个大的文件,要进行逻辑处理,那么这个逻辑的代码要放在循环每一行的循环体里面,这样有可能会出现一个for循环的逻辑嵌套,一层又一层,类似俄罗斯套娃.如果放 ...

  9. Day_03

    1.指针基本操作 package main import "fmt" func main() { var a int //每个变量有2层含义:变量的内存,变量的地址 fmt.Pri ...

  10. 在python的虚拟环境venv中使用gunicorn

    昨天遇到的问题,一个服务器上有好几个虚拟机环境. 我active进一个虚拟环境,安装了新的三方库之后, 使用gunicorn启动django服务, 但还是死活提示没有安装这个三方库. 一开始没有找到原 ...