node-red导出图表PDF

萧技电创EIIA2026-01-20 9:08

所需组件和库

用node-red-dashboard 组成可视可见Web界面

用node-red-contrib-pdf导出PDF

用按钮来触发，打印出我们在web上的界面的图表PDF或者一些其他的东西

组件连线

node-red-dashboard button节点 > node-red-dashboard template > function 节点 >ode-red-contrib-pdf 生成PDF

程序功能

button 内容

点击按钮输出内容exportPDF用于触发后续内容

template 程序内容

javascript 复制代码

<script>
  (function(scope){
  scope.$watch('msg', function(msg){
    if(msg && msg.payload === "exportPDF"){
      const canvas = document.querySelectorAll('.nr-dashboard-chart canvas')[0];
      if(canvas){
        scope.send({ payload: canvas.toDataURL('image/png') });
      }
    }
  });
})(scope);
</script>

当外部给这个 ui_template 节点发送一条消息，且 msg.payload === "exportPDF" 时：

去页面里找到第 0 个 图表（chart）的 <canvas>
把这个 canvas 转成 base64 的 PNG 图片数据（dataURL）
再 scope.send() 发回 Node-RED 流程里（下游节点就能拿到图片）

function内容

javascript 复制代码

const img = msg.payload;
msg.payload = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { font-family: Arial; text-align: center; }
img { width: 100%; }
</style>
</head>
<body>
<h2>图表</h2>
<img src="${img}">
<H1>生成时间：${new Date().toLocaleString()}</H1>
</body>
</html>`;

msg.filename = `C:/Users/xlk61/Desktop/导出chart/${list}.pdf`;


return msg;

msg.fliename 是导出pdf存放路径。