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 部分

1. 下载一个chrome镜像docker pull justinribeiro/chrome-headless
2. 启动镜像 docker run -d -p 9222:9222 justinribeiro/chrome-headless
3. 浏览器访问http://localhost:9222/

php 部分

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

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

2. 获取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"
   } ]
   

3. 跟浏览器通讯，打印页面，代码中传输的参数都来自这里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;
        }
    }
```

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

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

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

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

结束语

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