抓取网页生成电子书(上一个迭代任务是将一个html网页转换成pdf的知识点)

　　抓取网页生成电子书(上一个迭代任务是将一个html网页转换成pdf的知识点)

　　最后一个迭代任务是将 html 网页转换为 pdf。 pdf转现有系统的插件是TCPDF，但是这个插件太老了，支持的css样式和html标签太少。在尝试用 TCPDF 写了两天后，我放弃了。

　　然后改成wkhtmltopdf，不得不说wkhtmltopdf终于完美的把网页转换成pdf了。接下来写一下本次生成pdf用到的知识点。

　　参考文献文章：

　　1、封面：

　　封面可以定制。我写了另一个html页面作为这个pdf的封面，然后用命令添加了。

　　比如：cover.html就是我写的封面，效果如下：

　　然后生成pdf封面的命令是这个：wkhtmltopdf cover http://api-dev.inboyu.com/pdf-helper/cover?accessToken=d7018f0675f93468a709bce767104312

其中：http://api-dev.inboyu.com/pdf-helper/cover?accessToken=d7018f0675f93468a709bce767104312

是这个cover.html访问路径。

accessToken 是返回页面上标题和申请人所需要的参数。

　　2、页眉、页脚

　　页眉和页脚也可以添加一个html作为封面。不过我没试过，只是用了wkhtmltopdf提供的命令。

　　wkhtmltopdf --header-left "XXX*敏*感*词*" --header-right "[date] [time] 机密文件请勿外传" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 页-"

　　3、目录

　　本次迭代的亮点是这个目录，也被wkhtmltopdf代替了，因为目录TCPDF不知道怎么实现（或者根本无法实现）。

　　我们最终生成的目录如下所示：

　　是不是比带有pdf的侧边栏书签好看多了？哈哈

　　这个目录是如何实现的？

　　这里需要注意的是，新的wkhtmltopd版本不支持。我使用 wkhtmltopdf 0.12.3.

　　然后根据网页中的H1、H2...标签确定目录。所以网页应该已经准备好了。

　　接下来就是一行命令：

　　wkhtmltopdf toc

　　总而言之，我必须从网页生成带有自定义封面、目录、页眉、页脚的 pdf 的所有命令如下：

wkhtmltopdf --header-left "XXX科技*敏*感*词*" --header-right "[date] [time] 机密文件请勿外传"

--header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 页-"

cover http://api-dev.inboyu.com/pdf-helper/cover?accessToken=d7018f0675f93468a709bce767104312

toc --toc-header-text "目录" https://api-test.inboyu.com/pdf-helper/get-project-expand-html?accessToken=d7018f0675f93468a709bce767104312 D:\\1.pdf

备注：

1、--toc-header-text "目录" 将目录变成中文，不然是contents。

2、http://api-test.inboyu.com/pdf-helper/get-project-expand-html?accessToken=d7018f0675f93468a709bce767104312 是要转换成pdf的网页。

3、D:\\1.pdf 是存放pdf的地址，因为在本地调试，所以我存在了D盘目录下。

　　就这么简单，转换后的pdf和网页差不多。

　　另外：

　　1、页面布局主要是pdf中表格布局可能被截断的问题，解决方法：

　　tr{page-break-inside: avoid;}

　　2、使用page-break-before:left;使以下三个都在生成的pdf中打开一个新页面。

　　3、我的pdf里也加了水印，好像wkhtmltopdf没有提供水印的方法（我还是找不到，如果有人用wkhtmltopdf提供的方法，希望大家告诉我，谢谢！）

　　我的做法是剪一张带水印的图片，如下：

　　然后将它添加到这个网页的最外层父元素作为背景，然后重复背景，例如：

//网页内容

//网页内容

//网页内容

　　终于实现了水印的效果。需要提醒的是，在做水印的时候，我们网页的效果和pdf的效果可能会有差距。生成pdf后，水印的间距会变差。这时候可以调整你的网页窗口大小，让你的网页收紧生成的pdf，然后调整水印，让最终生成的pdf准确无误，包括上面提到的封面。偏差）。

　　我的pdf水印效果如下：

　　4、如果有图表，如果看到别人说加*敏*感*词*：false；禁止*敏*感*词*，可以显示，否则生成的pdf中的图表会是空白的。

　　或者（我使用的方法）：

　　1、先用 结合echarts生成一个图表。

2、然后调用echarts的getDataURL方法生成一个图片地址放到

let echartKLine = echarts.init($('.js-kline'));

echartKLine.setOption(option);

window.onresize = echartKLine.resize;

$("#js-img").attr("src",echartKLine.getDataURL())

最后隐藏 js-kline，显示 js-img。

相当于把图表变成了和这个图表长得一摸一样的图片。

　　至此，基本上所有的问题都涉及到了。生成的 pdf 与网页几乎完全相同。