一、背景要求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。具体操作请参考下文。#安装npmipuppeteer--save2，任意区域截图第一张图为图表HTML页面，第二张图为指定区域截图，代码如下：constexpress=require('express');constpuppeteer=require('puppeteer');constapp=express();app.use(express.static('public'));asyncfunctionscreenshot(){try{//添加启动参数'--no-sandbox','--disable-setuid-sandbox'//解决Linux环境下“nousesandbox”错误constbrowser=awaitpuppeteer.launch({args:['--no-sandbox','--disable-setuid-sandbox'],headless:true});constpage=awaitbrowser.newPage();awaitpage.goto('http://localhost:3008/');letclip=awaitpage.evaluate(()=>{//获取指定容器坐标信息let{x,y,width,height}=document.getElementById('container').getBoundingClientRect();return{x,y,宽度,高度};});awaitpage.screenshot({path:'chart.png',clip:clip//设置剪辑属性});哇aitpage.close();等待浏览器关闭（）；}catch(error){抛出错误；}}//访问http://localhost:3008/screenshot截图app.get('/screenshot',(req,res)=>{screenshot().then(data=>res.json('clipsucceeded')).catch(err=>res.json('剪辑失败'));});app.listen(3008);4.定时任务constCronJob=require('cron').CronJob;//每天9点执行定时任务，其他时间可以找玉米表达式或者使用玉米表达式生成工具newCronJob({cronTime:'009***',onTick:function(){screenshot();},start:true});5.Linux上的部署问题至此，我们已经实现了导出Highcharts图表的功能，但这只是针对windows系统的开发，在机器上运行这个过程后，部署到a上时还需要解决以下问题Linux机器。Chromium依赖包安装：官网列出了Debian和Centos的依赖包列表。linux默认是没有中文字体的，所以我们页面上的中文都是乱码。以Debian系统为例安装字体#安装文泉驿字体apt-getupdateapt-getinstall-ywqy*其他字体安装：由于项目对图表文字显示要求严格，要求中文显示为斜体和英文要用newtimesroman显示，所以你必须从windows复制字体。有关详细信息，请单击此处在Debian上安装Windows字体
