页面直接导出为PDF文件，支持分页与页边距

程序员文章站 2023-08-21 11:28:07

将WEB页面直接导出为pdf文件是经常会用到的一个功能，尤其是各种报表系统。本文探索如何直接导出pdf并分页与处理页边距 ......

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

在后端用代码生成pdf文件，比如itext一类；
在后端抓取页面并生成pdf文件，比如phantomjs一类；
在前端用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：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>测试pdf导出</title>
 6     <meta http-equiv="x-ua-compatible" content="ie=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <script src="js/html2canvas.min.js"></script>
 9     <script src="js/jspdf.min.js"></script>
10     <style>
11     html,body { margin:0; padding:0; }
12     #page ul { padding:0;list-style:none; }
13     #page li { line-height:110px;color:#fff;padding-left:10px; }
14     .c0 { background-color:#ea644a; }
15     .c1 { background-color:#f1a325; }
16     .c2 { background-color:#38b03f; }
17     .c3 { background-color:#03b8cf; }
18     .c4 { background-color:#bd7b46; }
19     .c5 { background-color:#8666b8; }
20     </style>
21     <script>
22     function exportpdf() {
23         var element = document.getelementbyid("page");
24         html2canvas(element, {
25             logging:false
26         }).then(function(canvas) {
27             var pdf = new jspdf('p', 'mm', 'a4');    //a4纸，纵向
28             var ctx = canvas.getcontext('2d'),
29                 a4w = 190, a4h = 277,    //a4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
30                 imgheight = math.floor(a4h * canvas.width / a4w),    //按a4显示比例换算一页图像的像素高度
31                 renderedheight = 0;
32 
33             while(renderedheight < canvas.height) {
34                 var page = document.createelement("canvas");
35                 page.width = canvas.width;
36                 page.height = math.min(imgheight, canvas.height - renderedheight);//可能内容不足一页
37 
38                 //用getimagedata剪裁指定区域，并画到前面创建的canvas对象中
39                 page.getcontext('2d').putimagedata(ctx.getimagedata(0, renderedheight, canvas.width, math.min(imgheight, canvas.height - renderedheight)), 0, 0);
40                 pdf.addimage(page.todataurl('image/jpeg', 1.0), 'jpeg', 10, 10, a4w, math.min(a4h, a4w * page.height / page.width));    //添加图像到页面，保留10mm边距
41                 
42                 renderedheight += imgheight;
43                 if(renderedheight < canvas.height)
44                     pdf.addpage();//如果后面还有内容，添加一个空页
45                 delete page;
46             }
47             pdf.save('content.pdf');
48         });
49     }
50     
51     function generatedata() {
52         var html = [];
53         html[html.length] = '<ul>';
54         for(var i = 0;i < 20;++i) {
55             html[html.length] = '<li class="c';
56             html[html.length] = i % 6;
57             html[html.length] = '">这是第';
58             html[html.length] = i;
59             html[html.length] = '行</li>';
60         }
61         html[html.length] = '</ul>';
62         document.getelementbyid('page').innerhtml = html.join('');
63     }
64     </script>
65 </head>
66 <body onload="generatedata()">
67     <button onclick="exportpdf()">导出pdf</button>
68     <div id="page"></div>
69 </body>
70 </html>

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

页面直接导出为PDF文件，支持分页与页边距

上一篇：关于Highcharts数据量超过1000时无法显示问题

下一篇： Vue之组件及组件通信