利用命令行将pdf转换为长图

业务场景

项目中会时不时遇到展示pdf文件的需求&＃xff0c;比如需要展示某些合同或者一些PPT报告之类的。我们在做《娱乐宝》、《票票专业版》项目期间都遇到了这样的需求。针对如何展现pdf文件的内容&＃xff0c;一般无外乎以下几种方案&＃xff1a;

让客户端渲染pdf
H5页面通过开源的JS库对PDF文件进行渲染
将pdf打印为图片&＃xff0c;然后再利用H5页面对文件中的多张图片分步下载并渲染。

而这几种方案在实际操作过程中又分别有各自的问题&＃xff0c;我们首先讨论第一种方案。让客户端渲染PDF有两种方式&＃xff1a;1. 借助系统已有的功能&＃xff0c;比如webbiew。2. 利用开源的pdf渲染库。iOS中webview自带了pdf渲染功能&＃xff0c;同时支持缩放等操作&＃xff0c;体验相当好&＃xff0c;但安卓不支持&＃xff0c;需要自己开发实现。而第三方PDF渲染库普遍比较大&＃xff0c;一般都要好几兆&＃xff0c;为了这样一个非核心功能引入这么大一个库&＃xff0c;客户端同学是坚决不会答应的。第二种方案初看起来不错&＃xff0c;至少省去了客户端兼容的成本。调研了下JS渲染PDF方面的实现&＃xff0c;比较著名的是Mozzila的pdf.js。但这个库也有一些问题&＃xff1a;

这个库的源文件体积不小&＃xff0c;源文件282K&＃xff0c;gzip压缩后110K。
需用通过Ajax方式加载PDF文件&＃xff0c;而正式项目中&＃xff0c;我们一般需要把PDF文件上传到CDN。
使用Canvas对PDF中的图片进行渲染&＃xff0c;PDF中图片比较多的话将会生成大量的canvas
渲染出的结果存在兼容性问题&＃xff0c;不同字体设置会导致渲染结果差异很大。

前两个问题通过一些技术手段还能绕过去&＃xff0c;但后两个几乎无解了&＃xff0c;尤其是用canvas渲染图片。canvas在移动端太耗性能了&＃xff0c;Canvas太多的话会造成浏览器渲染性能严重下降&＃xff0c;iphone下甚至会导致APP崩溃。采用Canvas渲染图片的证据。

不同字体设置导致渲染结果不一致的问题&＃xff1a;

此外在测试过程中还发现&＃xff1a;那个库提供的Demo页面在UC下打开且打开的PDF文件比较大的情况下&＃xff0c;多翻几页之后会出现页面加载不出来的情况&＃xff0c;因此这个库在H5下的兼容问题堪忧。因此采用JS库渲染PDF目前来看不太适合应用在H5项目中&＃xff0c;在PC项目中还可以考虑下。

经过排除后目前只剩下将PDF转换为图片然后用H5来渲染这一方案了&＃xff0c;至于此方案的具体实现&＃xff0c;可以参照之前发布的一篇文章《一个简单H5活动页面模板的设计》。这个方案比较简单可靠&＃xff0c;但面临一个很烦人的问题&＃xff1a;需要将PDF的每一页转换为图片然后拼接为长图。如果这个过程需要人工来完成将是非常繁琐的&＃xff0c;而如果文件比较大的话那简直是噩梦了&＃xff0c;因此这个过程是必须由程序自动来完成的。

利用命令将PDF自动转换为长图

如果由程序完成将PDF转换为长图&＃xff0c;必须要实现两个功能&＃xff1a;

将PDF的每一页转换为图片
将转换后的多张图片合并为一张长图

还好这两个功能都有相应的软件支持&＃xff0c;而且这两个软件的命令行支持都非常好&＃xff0c;而且都支持brew进行安装。将PDF转换为图片最著名的库莫过于GhostScript&＃xff0c;在项目中我们也选用了这个库。将PDF的每一页转换为图片可以通过下面的命令来实现

gs -sDEVICE&＃61;pngalpha \ # 输出格式为png-o "./tmp-pdf-page/$filename-%d.png" \ # 设置每一页对应图片的名称-r144 "$pdfname"; # 设置每英寸内的像素数

将多张图片拼合为一张有多种软件可以实现&＃xff0c;比较有名的是ImageMagick和GraphicsMagick。ImageMagick资历最老&＃xff0c;文档最全&＃xff0c;支持的特性最多&＃xff0c;但运行起来比较缓慢。GraphicsMagick脱胎于ImageMagick 5.x&＃xff0c;支持的特性比较少&＃xff0c;命令格式几乎与ImageMagick通用&＃xff0c;运行速度飞快&＃xff0c;但文档非常少&＃xff0c;而且有些特性不支持&＃xff08;本文后面程序中所使用的切功能&＃xff1a;shave在测试时没有调试通过&＃xff09;。考虑到这个功能无论在本机还是服务端调用都不是很频繁&＃xff0c;因此我们使用了ImageMagick。下面的代码可以实现将多张图片拼接为一张长图&＃xff0c;为了输出的图片更加美观&＃xff0c;图片之间添加了一定的白色空白。

convert ./tmp-pdf-page/$filename-*.png \-background white \-bordercolor white \ # 设置图片边框颜色-border 0x50 \ # 图片上下添加50像素边框 &＃xff0c;因此图片之间有100px的边框-append \ # 图片直接垂直拼接&＃xff0c;如果水平拼接可用&＃43;append-shave 0x50 \ # 删除合并后图片的上下边框&＃xff0c;GraphicsMagick不支持此操作-resize 1080 \ # 将拼接后的图片宽度调整为1080-quality 85 \ # 设置输出的JPG图片质量-sharpen 0x1.0 \ # 拼接后的图片字体有点发虚&＃xff0c;在垂直方向做锐化处理 $filename-dest.jpg

有一点需要说明下&＃xff0c;安装GhostScript后&＃xff0c;ImageMagick内部可以直接调用GhostScript实现将PDF转换为长图&＃xff0c;具体实现可以参考如下&＃xff1a;

convert demo.pdf \-resize 620 \ # 设置每张图片尺寸-alpha remove \ -density 620 \ # 设置分辨率&＃xff0c;按文档应该越高越好 -mattecolor &＃39;#cccccc&＃39; \ # 设置间隔颜色&＃xff0c;作用与上面代码中的border相同-frame 10x5 \ # 设置图片间隔宽度-append \-quality 85 \-frame 0x5 \-sharpen 0x1.0 \demo.jpg

这段代码省去了第一步利用GhostScript将PDF转换为多张图片的步骤&＃xff0c;但效果不是很理想&＃xff0c;无论怎么设置分辨率&＃xff08;density)和JPG质量&＃xff08;quality&＃xff09;&＃xff0c;转换出来的图片都有点糊&＃xff0c;因此实际项目中我们使用了分开处理的方案。

因为操作比较多&＃xff0c;我们写了个bash脚本对这些逻辑做封装&＃xff0c;使用方式为&＃xff1a;bash convert.sh demo.pdf&＃xff0c;脚本完整代码如下&＃xff1a;

#!/bin/bash## 计算pdf文件名&＃xff0c;参考资料: # http://www.runoob.com/linux/linux-shell-variable.html # https://stackoverflow.com/questions/965053/extract-filename-and-extension-in-bash/965072 # https://stackoverflow.com/questions/965053/extract-filename-and-extension-in-bash # https://stackoverflow.com/questions/3362920/get-just-the-filename-from-a-path-in-a-bash-script # pdfname&＃61;$1 filename&＃61;"${pdfname%%.*}"## 创建临时文件夹存储每张pdf页面对应的图片 mkdir tmp-pdf-page## 将pdf转换为多张png gs -sDEVICE&＃61;pngalpha -o "./tmp-pdf-page/$filename-%d.png" -r144 "$pdfname";## 将多张图片合并为一张&＃xff0c;每张图片直接添加50像素间隔&＃xff0c;最后 # 将图片尺寸设置1080宽度后裁掉第一张和最后一张的边框&＃xff0c;并 # 进行锐化处理后输出为jpg。 # 参考资料&＃xff1a; # http://www.imagemagick.org/Usage/crop/#border # http://www.imagemagick.org/Usage/crop/#frameconvert ./tmp-pdf-page/$filename-*.png \-background white \-bordercolor white \-border 0x50 \-append \-shave 0x50 \-resize 1080 \-quality 85 \-sharpen 0x1.0 \ $filename-dest.jpg## 删除单张pdf文件对应的图片 rm -rf ./tmp-pdf-page

转换后图片在线上的实际效果

是否可以应用到服务端&＃xff1f;

答案是可以&＃xff0c;这一方案依赖的两个软件&＃xff1a;ImageMagick和GhostScript在Linux和Mac下均有提供&＃xff0c;所以可以无缝移植的服务端。最早做这个方案的研究是在一年多以前&＃xff0c;当时在做《娱乐宝》项目&＃xff0c;每个项目上线都要上传合同&＃xff0c;所以把生成图片并上传CDN的功能做到了小二后台中。当时是直接利用ImageMagick将PDF转换为长图的功能&＃xff0c;没有使用先用GhostScript转换为多图然后再用ImageMagick拼接的方案。当时的效果不是很理想&＃xff0c;文字总是比较糊。但当时一来没有找到理想的解决方案&＃xff0c;二来支付宝对于图片的大小有要求&＃xff0c;所以就将就着用了。后来项目中又遇到了这个需求&＃xff0c;所以花了些时间整理和优化了下&＃xff0c;所以有了本文提到的这个方案。

移植到服务端没有问题&＃xff0c;但有几点需要注意下&＃xff1a;

服务端环境一般都没有安装ImageMagick&＃xff0c;需要自己手动安装。而且Linux版本的ImageMagick处于安全考虑是不能直接完成pdf转图片的&＃xff0c;需要对配置文件进行一些配置。具体配置很简单&＃xff0c;基本看一眼就懂了。
Linux环境下中文字体普遍比较少&＃xff0c;好像只有宋体&＃xff0c;所以转换出来的效果没有Mac下好看。如果这种需求的频率比较低且对最终的转化效果由一些要求&＃xff0c;建议还是在Mac下进行转换。
本文的bash脚本方案会产生临时文件&＃xff0c;不建议部署到服务端&＃xff01;

后记

目前这个方案还是不是特别理想&＃xff0c;一个让人很不爽的地方是&＃xff1a;因为每个pdf页面都需要生成一张图片&＃xff0c;所以程序运行期间需要建立多个临时文件。我一向对临时文件深恶痛绝&＃xff0c;因为临时文件不仅会凭空增加磁盘访问量&＃xff0c;而且如果管理不好的话会造成垃圾文件越堆越多&＃xff0c;而如果不巧这个程序运行在服务端那就有可能把磁盘都占满了。在写此文之前&＃xff0c;我曾尝试了多个方法把这个临时文件干掉&＃xff0c;但最终都不是很理想。

首先GhostScript提供将结果输出到标准IO的功能&＃xff0c;但ImageMagick的append功能无法支持从标准IO读取多张图片文件&＃xff0c;因此此方案行不通。GraphicsMagick也不支持从命令行读取多张方案&＃xff0c;但gm与GhostScript协同调用的效果比ImageMagick的效果要好&＃xff0c;转换后的效果与本文中用两部实现的效果相当&＃xff0c;但需要自己手动计算PDF页数&＃xff0c;而且因为不支持-shave参数&＃xff0c;需要自己手动对最后转换后的图片进行必要的裁切。我们的使用场景主要是开发本机调用&＃xff0c;开发时间所限&＃xff0c;没有对GraphicsMagick方案进行进一步调研。如果是部署到服务端&＃xff0c;建议使用GraphicsMagick&＃xff0c;不仅效率高而且不会产生临时文件&＃xff0c;GraphicsMagick直接将PDF转换为长图的代码&＃xff1a;

gm convert -density 1080 \-mattecolor red \-frame 0x50 \-append \-shave 0x50 \ # 裁剪功能在GM下没有生效&＃xff0c;不知是否是使用不当还是这种情况下不支持。-resize 1080 \ -quality 85 \test.pdf[1-4] \ # 这里需要手动制定要转换的页码范围test-tmp.jpg

参考资料

http://www.runoob.com/linux/linux-shell-variable.html
https://stackoverflow.com/questions/965053/extract-filename-and-extension-in-bash/965072
https://stackoverflow.com/questions/965053/extract-filename-and-extension-in-bash
https://stackoverflow.com/questions/3362920/get-just-the-filename-from-a-path-in-a-bash-script
https://stackoverflow.com/questions/653380/converting-a-pdf-to-png
http://www.imagemagick.org/discourse-server/viewtopic.php?t&＃61;15523
http://www.imagemagick.org/Usage/crop/#border
http://www.imagemagick.org/Usage/crop/#frame