使用mPDF生成含动态Google Charts的PDF报表时图表空白问题求助

Google Charts是依赖JavaScript动态渲染的图表库，而mPDF仅支持解析静态HTML/CSS内容，本身没有JS执行能力，因此直接将包含Google Charts代码的HTML传入mPDF会出现图表区域空白的问题，可通过以下两种方案解决：

方案1：前端转base64图片后传入mPDF（最常用，适配前后端分离场景） #

• 监听Google Charts实例的ready事件，确认图表完全渲染后调用实例自带的getImageURI()方法，即可获取当前图表的PNG格式base64编码
• 前端将得到的base64字符串通过表单、接口等方式传递给后端
• 后端在生成PDF的HTML模板中，直接将base64字符串作为<img>标签的src属性值即可，mPDF原生支持base64格式的图片资源

示例前端代码：

// 绑定图表渲染完成事件
google.visualization.events.addListener(chartInstance, 'ready', function () {
  // 获取图表base64编码
  const chartImgBase64 = chartInstance.getImageURI();
  // 此处将chartImgBase64传递给后端即可
});

方案2：服务端通过无头浏览器预渲染（适合无前端介入的批量生成场景） #

如果是服务端直接生成报表的场景，不需要前端参与，可以借助Puppeteer等无头浏览器工具预渲染图表：

• 服务端先启动无头浏览器访问提前写好的、包含所有Google Charts的页面
• 等待页面所有JS执行完成、图表全部渲染完毕后，要么直接调用无头浏览器的PDF导出方法生成初始PDF，再用mPDF做后续内容拼接；要么单独截取每个图表区域的图片资源，传入mPDF的模板中使用
• 该方案兼容性更强，不需要修改原有图表的业务代码，复杂配置的图表也能完整导出

注意事项 #

• 不要直接将包含Google Charts JS代码的HTML传入mPDF，没有JS执行引擎的支持永远无法渲染出图表
• 导出前可以提前调整图表的渲染尺寸，避免生成的图片在PDF中出现拉伸、排版错乱的问题
• 多图表场景建议等待所有图表的ready事件全部触发后，再统一向后端提交数据，避免出现部分图表丢失的问题

内容的提问来源于stack exchange，提问作者David Buch