干货 Capture Html Content After Render

在前端技术越来越注重用户体验的潮流下，异步数据渲染组件成为主流，但是异步渲染给爬虫和相关需要使用页面异步渲染后Dom结构的需求来说，变得很麻烦。

要想获取渲染后的页面内容，

常见的方法有：

使用类似于PhantomJS的

Headless浏览器，模拟页面渲染，

获取页面HTML；

分析Ajax请求，

获取请求后的数据。

对于千变万化的页面结构来说，第一种方法更具备通用性，首选需要安装PhantomJS，然后编写js脚本，最后就是运行脚本获取结果啦。

比如我编写了一个loadPage.js,用于支持页面截图或者页面渲染后的HTML结构获取：

服务端通过Process类调用Linux中的shell脚本，运行截图或者页面渲染服务，然后把获取到的结果存储到文件存储系统中，返回文件存储的地址URL给业务方，业务方通过URL访问原始数据，减少网络数据传输。

ShellUtil中的运行代码：

在截图服务中，首次出现了中文乱码，网上有同学说安装bitmap-fonts，但是并不好使，建议删除：

网页查看我们使用的字体内容：

可以看到有多种字体，最后的 sans-serif 默认对应是黑体，需要把这5种字体装到截图的 Linux 服务器，分别从osx和windows上copy出来。

注意一下，osx 中的字体是 .ttc 和 .dfont 格式的，我们可以借助 http://transfonter.org/ttc-unpack来转换为 Linux 支持的 .ttf 的格式。

把这些文件拷到 Linux 服务器上，然后调用 fc-cache 更新一下

-END-