前言
之前的项目做过浏览器某个页面打印成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 \
# 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' => ""]
]));
$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()解决,大家要是有什么好的办法可以留言讨论～～～
