前端实现html页面转pdf实现方案对比

　　昨天搞了个前端html转pdf的功能。略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示。经过一番调研发现html导出pdf一般有这几种方式，各有各有优缺，下面简单介绍。

一、通过jsPdf实现

　　此种方案可以看昨天写的博客：jsPDF将html页面生成pdf文件的前端解决方案及html2canvas如何真正解决跨域图片的问题

　　主要就是利用html2canvas和jsPDF生成pdf文件，对于不分页的文件比较好，如果对于需要分页的文件，则不大适合。当然对于确实需要分页pdf文件，下面这个方法通过打印预览实现，也是不错的选择。

二、通过打印预览实现

　　通过打印预览来实现导出pdf并不是什么稀奇事，一般浏览器(Chrome)在页面手动Ctrl + P都能将当前页进行打印预览。在打印预览的时候我们更改打印方式，选择将页面保存为PDF即可实现页面保存为PDF的功能。

　　比如我们在谷歌进行Ctrl + P就可以看到这个功能。而且对pdf分页还处理的挺好的。

　　程序中实现这个则要靠下面这个方法来实现：

window.print(); // 在控制台执行print()也能看到上面打印预览的效果

　　当然能导出PDF只是主要需求，我们还有一些其他的需求

1. 只想将页面的一部分导出为PDF
2. 我们想导出的PDF是A4纸大小
3. 我们想导出的PDF是竖着的
4. 我们还想调整导出PDF的样式等等

　　这些需求通过在对css中媒体查询的定义就可以实现。具体可以看下这篇博客：通过CSS控制window.print打印样式浅析

@media print {
    @page {
        size: A4 portrait; // A4大小 纵向
    }
    .other-ele {
        // 打印时将不需要的元素隐藏
        display: none;
    }
    .pdf-title {
        // 只在打印时候显示的元素
        display: block;
    }
    .panel-sm {
        // 打印时候改变某些元素的样式
        margin: 0;
        border: 1px solid #bce8f1;
    }
}

　　需要提醒的是：如果要改变原有样式，最好是在元素上新加一个class或者id来写，而不是在原有class上写。

　　比如有这样一个元素

<h1 class="title">我是PDF标题</h1>

// 打印时候要把这个字体大小设置成18px的话，我们不能这么写
@media print{
   .title { // not work
       font-size: 18px;
   }
}

　　这样写是不起作用的。想要生效得在元素上新加一个class类写

<h1 class="title title-print">我是PDF标题</h1>

@media print{
   .title-print {
       font-size: 18px;
   }
}

　　经过实践，这样写才可以生效。

　　有人可能觉得这样写略有麻烦，别担心，总有人会让麻烦的事情变得简单，基于window.print()有人封装了一些插件：

　　PrintArea可以简单的实现部分区域打印，他的原理是通过把要打印的部分放入一个新的iframe然后触发这个iframe的print。这个插件不太稳定，会出现空白，请酌情使用。

　　jQuery.print比上面的稍微好点，支持了一些css方面的东西，具体看这个jQuery.print中文配置参数

　　这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成pdf的过程不需要自己操心，页面样式还可控，可以说是非常不错的。但是因为浏览器对print方法的支持不一，所以目前也就只能在Chrome上用用。另外，这个方法还需要用户点一下保存按钮，用户体验上也不太好。

三、后端导出pdf

　　iText、wkhtmltopdf、prince这三个都是后端生成pdf的工具。这三个都没有node api。

　　想看具体的比较可以参考这篇文章html页面导出为pdf（jsPDF、iText、wkhtmltopdf）。