通过自建API实现生成多页PDF文档

方滴云WEB2022-03-09 17:23

自从开始了云开发,根本不想停下来。便捷的后面端交互、大量的内部API免鉴权以及安全的私链数据等众多优势,让我对其越来越爱不释手。

虽然云开发团队在日以继夜的做产品升级与新功能开发,但是有些边角需求的解决方案依然需要自己动手,比如今天我们讨论的HTML生成多页PDF文件。这个最常见的应用就是合同文件的生成了。

我们也在网上寻求了很多解决方案,大多的实现原理都是先将HTML转换成图片,然后再将图片转换成PDF。这个方案在内容不多或者内容比较有规律的情况下,是可以完美解决的。比如生成发票。

多方寻求无果,最终我们选择了通过API的方式来生成。大致的原理是将HTLM文件转回服务端,然后在服务端渲染生成PDF文件然后在前端进行展示。

为了展示效果,这里我们提供了三个模版,带大家一起看看具体的效果。

模版一:简单的图文混排

HMLT预览地址为:https://fdywx.top/admin/pdf/test。为了方便查看,我们将大概的展示效果截图展示在下面。

点击下方的“生成PDF文件”按钮,文件开始生成。

稍等片刻,也可以生成香气喷喷的PDF文档了。

我们发现它可以自动分页了,按A4纸的大小一共分成了三页,整体的效果,还是挺让人满意的。

模版二:网上找的报价单

HMLT预览地址为:https://fdywx.top/admin/pdf/test?tp=2。这个文件的不同之处在于,这里我们的页眉页角都是定制在,大致效果如下,更直观的效果大家可以点击链接查看详情。

生成后效果,页眉页脚也都是按我们的HTML生成的,如下图所示,一共分成了三页,点击下载PDF文档

模版三:一个内容更多的HTML文档

HMLT预览地址为:https://fdywx.top/admin/pdf/test?tp=1。因为这次的内容更多,一共有7页,也可能同时由于图片比较多,所以生成速度上并不是很理想。如果有兴趣,大家可以点击预览地址生成PDF文件进行测试。