一、场景需求
项目中需要为用户生成分析报告,报告的内容是由多个图表和文本描述组成的word/pdf文档。这需要在服务端生成echarts图片,然后将图片插入到报告中。
二、实现思路
搭建一个web服务,基于ejs动态渲染出包含echarts配置信息的html页面,使用headless浏览器渲染html页面,然后对echarts图表进行截图,返回echarts图表的base64编码。
三、实现步骤
第一步:使用express搭建一个web服务器。
const express = require("express");
const path = require("path")
const app = express();
const renderCharts = require('./controller/charts')
//配置静态路径
app.use(express.static(path.join(__dirname, "./resource"))) app.use(express.static(path.join(__dirname, "./dist/html")))
//解析json格式的请求体
app.use(express.json())
//将ejs设置为默认的模板引擎
app.set("view engine", "ejs")
//设置模板路径
app.set("views", path.resolve(__dirname, "views"))
//配置路由
app.post("/echarts", renderCharts)
//启动服务
app.listen(3000, () =>{
console.log("服务器已经启动!请访问:http://localhost:3000")
})
第二步:使用ejs引擎,动态渲染包含echarts配置信息的html页面。
//html模板字符串
const layoutHtmlStr = `
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<div id="container" style="height: 400px; width: 500;"></div>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script type="text/javascript">
echarts.init(document.getElementById('container')).setOption(<%- chartConfigStr %>);
</script>
</body>
</html>
`
function renderCharts(req, res, next){
//获得请求参数
var chartConfig = req.body.chartConfig;
//将模板字符串和echarts配置项作为参数传递给 EJS,渲染出html文件
let chartHtmlStr = ejs.render(layoutHtmlStr, {chartConfigStr:JSON.stringify(chartConfig)})
let chartHtmlPath = path.join('http://localhost:3000/0.html');
fs.writeFile(chartHtmlPath, chartHtmlStr, (err)=>{
if(err){
return next(err)
}
htmlToBase64Img().then((base64img) => {
res.send(base64img)
fs.unlink(chartHtmlPath, ()=>{});
})
})
}
第三步:使用无界面浏览器phantomJS打开html文件,渲染echarts图表并截图,返回图片的base64编码。
async function htmlToBase64Img() {
try{
var phInstance = await phantom.create();
var sitepage = await phInstance.createPage();
await sitepage.open(`http://localhost:3000/0.html`);
var base64img = await sitepage.renderBase64(('PNG'))
sitepage.close();
phInstance.exit();
return base64img;
}catch(error){
throw new Error(error)
}
}
四、效果展示
下面是一个echarts图表在线调试页面,将生成echarts图表的配置信息输入在左侧文本框中,点击生成图片按钮调用接口,将echarts图表的base64编码展示在右侧图表预览区。