基于nodejs在服务端生成echarts图片方案

最新推荐文章于 2024-12-15 22:35:09 发布

原创最新推荐文章于 2024-12-15 22:35:09 发布

· 1.9k 阅读

14 ·

版权

文章标签：

#javascript

本文介绍了如何通过Express框架搭建Web服务，利用EJS动态渲染包含Echarts配置的HTML，借助headless浏览器PhantomJS渲染图表并获取其Base64编码，实现在服务端生成分析报告的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、场景需求

项目中需要为用户生成分析报告，报告的内容是由多个图表和文本描述组成的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)
  }
}