chrome headless php,chrome headless+php实现打印pdf服务

前言

之前的项目做过浏览器某个页面打印成pdf的服务，所用的是tcpdf这个包，大概思路就是后台写一套跟页面一样的html模版，打印的时候把数据渲染进去，不好的地方在于所见非所得，你得花大把的时间去做一些样式的调整,甚是痛苦。还有一个问题是现在的页面渲染很多都使用js，这样的话在后端并没有办法处理，经过调查，发现了chrome headless模式。

所谓chrome headless就是让chrome以无头的模式在后台运行，然后我们可以借用他的api打印pdf(不仅仅是打印pdf，还可以截图，还有很多别的功能我了解的也不是很透彻)

开胃菜

如果你仅仅是想测试一下这个功能，可以通过命令行执行chrome文件，如下

chrome \ # 注意chrome是你的可执行软件，不同操作系统路径不同

--headless \ # Runs Chrome in headless mode.

--disable-gpu \ # Temporarily needed if running on Windows.

--remote-debugging-port=9222 \

https://www.chromestatus.com # URL to open. Defaults to about:blank.

这样就会把目标网站打印成pdf了，官方指导。

正餐

接下来要用docker启动chrome作为服务器，php作为后台，打印目标是一个react页面

docker 部分

下载一个chrome镜像docker pull justinribeiro/chrome-headless

启动镜像 docker run -d -p 9222:9222 justinribeiro/chrome-headless

浏览器访问http://localhost:9222/

php 部分

我们想跟后台运行的浏览器通讯，必须借助websocket的帮助，实际上是调用Chrome DevTools Protocol的api完成。

php 的websocket我选用了"textalk/websocket": "1.0.*"

获取webSocketDebuggerUrl,这个非常重要，我们要拿着这个url通过websocket跟浏览器通讯

$curlCmd = "curl -s 127.0.0.1:9222/json";

do {

$json = json_decode(shell_exec($curlCmd));

} while (empty($json));

$endpoint = $json[0]->webSocketDebuggerUrl;

获取到的response是这样滴

[ {

"description": "",

"devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/76B74DBA491F065BDD6097DD81F5514C",

"id": "76B74DBA491F065BDD6097DD81F5514C",

"title": "about:blank",

"type": "page",

"url": "about:blank",

"webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/76B74DBA491F065BDD6097DD81F5514C"

} ]

跟浏览器通讯，打印页面，代码中传输的参数都来自这里Chrome DevTools Protocol

```

// websocket

$client = new Client($endpoint);

$client->send(json_encode([

'id' => 1,

"method" => 'Page.enable',

]));

$client->send(json_encode([

'id' => 2,

"method" => 'Page.navigate',

"params" => ['url' => "https://test.com"]

]));

$frameId = null;

while ($data = json_decode($client->receive())) {

// 判断网页是否打开

if (@$data->id == 2) {

$frameId = $data->result->frameId;

}

// 判断网页是否停止加载

if (@$data->method == 'Page.frameStoppedLoading' && @$data->params->frameId == $frameId) {

$client->send(json_encode([

'id' => 3,

"method" => 'Page.printToPDF',

]));

}

// 获取结果

if (@$data->id == 3) {

file_put_contents("test.pdf", base64_decode($data->result->data));

break;

}

}

```

饭(坑)后(坑)甜(坑)点

打印的网页中文乱码,原因是chrome运行的环境没有中文支持，需要安装中文字体

apt-get update && apt-get install -y fonts-wqy-zenhei

所打印的页面中cssbackground-color打印不出来,需要在css中添加-webkit-print-color-adjust: exact;.

出处

结束语

不得不说chrome的打印非常牛逼，完美重现你的画面，js渲染的页面也可打印，哈哈哈，因为人家是浏览器啊～～～，天生支持。写的过程中还是有一个问题没解决的，react渲染页面需要时间，后台访问你的页面时有的还没加载完，打印会缺失一部分，我也不得不在后台写一个sleep()解决,大家要是有什么好的办法可以留言讨论～～～