学习
实践
活动
工具
TVP
写文章

干货 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-

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180521G1HL5X00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券