一、背景需求
1、因为数据包含机密信息，所以得自己搭建图表导出服务器；在后台生成对应Highcharts图表、以图片的形式导出保存。
2、图表个性化程度较高，如一些图列是Highchart没有的，但在前端可以利用css实现。
3、每周定时执行上述生成图表的任务，保存到指定位置。
4、需求已经上线一个月，生产上运行良好，时间有限，只能在这简单记录下，理一下思路也方便以后查阅。
二、实现思路
1、经过一番了解，发现Puppeteer，PhantomJs等可以实现上述Highchart图表以图片形式导出的功能，它们也常常用于：
- 爬虫
- 生成网页截图/PDF
- 测试等
2、这个需求选用了Puppeteer去完成，原因如下：
- 官方的文档也较为详细，相关API，另外其他项目用它实现PDF生成的实践，迁移到本项目爬的坑也会少点。
- 截出来的图片质量清晰，也满足业务的要求。
3、定时任务的需求则用了Cron实现；在设定的时间点，在后台用Puppeteer打开我们网页，实现特定区域截图。
三、Puppeteer使用
1、 安装，安装puppeteer同时，也会下载Chromium，安装地址为外国网站，下载失败的话多尝试几次、切换到cnpm或者手动下载。如果是部署再Linux上的话，还得安装依赖包才能启动Chromium，具体操作可以查看下面。
# 安装npm i puppeteer --save2、任意区域截图
第一张图为图表的HTML页面，第二张图是指定区域的截图，代码如下：
const express = require('express');const puppeteer = require('puppeteer');const app = express();app.use(express.static('public'));async function screenshot() { try { // 添加启动参数'--no-sandbox', '--disable-setuid-sandbox' // 解决Linux环境下"no use sandbox"报错 const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: true }); const page = await browser.newPage(); await page.goto('http://localhost:3008/'); let clip = await page.evaluate(() => { // 获取指定容器的坐标信息 let { x, y, width, height } = document.getElementById('container').getBoundingClientRect(); return { x, y, width, height }; }); await page.screenshot({ path:'chart.png', clip:clip //设置clip 属性 }); await page.close(); await browser.close(); } catch (error) { throw error; }}// 访问http://localhost:3008/screenshot进行截图app.get('/screenshot', (req, res) => { screenshot() .then(data => res.json('clip successed')) .catch(err => res.json('clip failed')); });app.listen(3008);四、定时任务
const CronJob = require('cron').CronJob;// 每天9点钟执行定时任务，其他时间可查找corn表达是或者使用corn表达式生成工具new CronJob({ cronTime: '0 0 9 * * *', onTick: function () { screenshot(); }, start: true});五、Linux上部署问题
至此，我们实现了导出Highcharts图表的功能，但是这只是在windows系统的开发机上把这个流程跑通，部署到linux机器上是仍需解决以下几点问题
- Chromium依赖包安装：官网列出了Debian和Centos依赖包列表，点击查看，按照上述列表按住即可
中文乱码问题：linux默认没有中文字体，所以我们页面上的中文全是乱码，以Debian系统为例安装字体
# 安装文泉驿字体apt-get updateapt-get install -y wqy*- 其他字体安装：由于项目对图表文字显示要求苛刻，要求中文以楷体显示，英文以new times roman显示，所以还得从windows上把字体拷贝过去，详细Debian安装windows字体戳这