html转PDF文件最完美的方案（wkhtmltopdf）

目录

需求

一、方案调研

二、wkhtmltopdf使用

如何使用

文档简要说明

三、后端服务

四、前端服务

往期回顾

---

需求

最近在做报表类的统计项目，其中有很多指标需要汇总，网页内容有大量的echart图表，做成一个网页去浏览，同时需要转成PDF格式下载浏览，更重要的是pdf格式再打开后，需要自定义页眉、页脚，页码，支持文本的选中、复制、粘贴，同时左侧也要有正常的页签导航，点击哪里到哪里。

一、方案调研

经过调研主要有以下几种方式生成pdf，但是每个方案都有缺陷，跟我们的需求相差。

方案	优点	缺点
window.print()	1、兼容性最好 2、可以将任意内容导出成 pdf 文档, 甚至是非改页面上的内容	1、调用方法时部分条件下导出pdf需要用户手动选择 2、生成的pdf不支持生成页签导航 3、页眉页脚不适合自定义
jspdf + html2canvas	1、在jspdf上将生成效果不佳的部分可以转成图片，适用于对样式有要求的场景 2、将乱码部分转为了图片，解决了中文乱码问题 3、没有预览点击即可保存	1、如果内容包含echart图表或者其它图表，该内容需要转图片 2、生成的pdf实际为图片，不支持复制 3、不同浏览器生成可能会有略微差异（页面周边留白部分差异）  4、由于整体效果为图片，导致pdf文件较大（两页2.5MB左右） 5、pdf分页不好处理 6、不支持生成页签导航
wkhtmltopdf	1、支持自定义页眉页脚页码 2、支持文本选中粘贴复制 3、支持将html的h标签自动生成pdf	1、需要结合后端去实现生成接口返回给前端下载 2、wkhtmltopdf 使用 WebKit 渲染引擎，这意味着它在某些情况下可能无法完全支持所有现代 CSS 和 JavaScript 特性，特别是那些依赖于最新浏览器特性的功能 3、wkhtmltopdf 对 JavaScript 的支持有限。虽然它可以在某些情况下执行简单的 JavaScript，但复杂的交互式内容可能无法正确渲染。

前两种是纯前端去实现的方案，一是用浏览器打印功能实现，这种方案简单粗暴，但是需要手动触发，不支持自定义页眉页脚页码，浏览器也不支持生成页签导航。第二种把整个页面生成图片，完整还原了样式但是，跟我们的要求差太远。第三种是wkhtmltopdf，底层是C++去实现的，能够高效地将 HTML 内容转换为高质量的 PDF 文件。下面主要介绍下wkhtmltopdf使用。

二、wkhtmltopdf使用

官网入口：wkhtmltopdf

如何使用

1. 下载预编译的二进制文件或从源代码构建

下载链接：wkhtmltopdf

以下是适配所有操作系统的包，我们根据自己的系统不同的下载包

以centeros7为例

1.首先我们下载我们需要的包

 我的是x86_64的，下载完成后将包传到服务器

 运行命令安装

rpm -Uvh wkhtmltox-0.12.6-1.centos7.x86_64.rpm

 报错！！！

原因是缺少依赖，我们来安装下依赖

yum install fontconfig libX11 libXext libXrender libjpeg libpng  xorg-x11-fonts-Type1