如何在 NodeJS 中生成包含 eCharts 内容的 PDF API

Question

我有一个 NodeJS API，我需要创建一个端点来创建功能丰富的动态 PDF 报告并将其保存到 S3 存储桶。我一直在使用 PDFKit (https://pdfkit.org/) 并从那里获得了大部分我需要的东西，但我遇到了一个绊脚石，因为我得到的最新设计包括一个用 eCharts 生成的圆环图我不知道如何使用 PDFKit 包含它。它需要为每个调用动态生成。没有显示报告的可见 HTML 页面，这必须全部在 NodeJS API.

中实现

是否有任何我忽略的预先存在的解决方案可以使这成为可能？

注意我有一定的灵活性，所以它不必是专门的 eCharts 解决方案，只要我可以包含带标签的堆叠圆环图即可。

谢谢。

Answer 1

这是完全可行的。我整理了一个将图表添加到 PDFKit 文档的示例。

const echarts = require("echarts");
const Canvas = require("canvas-prebuilt");
const { JSDOM } = require("jsdom");
const fs = require("fs");
const PDFDocument = require("pdfkit");
const SVGtoPDF = require("svg-to-pdfkit");

const option = {
  tooltip: {
    trigger: "item"
  },
  legend: {
    top: "5%",
    left: "center"
  },
  series: [
    {
      name: "Pie Chart",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2
      },
      label: {
        show: false,
        position: "center"
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold"
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: "A" },
        { value: 735, name: "B" },
        { value: 580, name: "C" },
        { value: 484, name: "D" },
        { value: 300, name: "E" }
      ]
    }
  ]
};

const getChartSVG = (option) => {
  echarts.setCanvasCreator(() => {
    return Canvas.createCanvas(100, 100);
  });

  const { window } = new JSDOM();
  global.window = window;
  global.navigator = window.navigator;
  global.document = window.document;

  const root = document.createElement("div");
  root.style.cssText = "width: 500px; height: 500px;";

  const chart = echarts.init(root, null, {
    renderer: "svg"
  });

  chart.setOption(option);

  const chartSvg = root.querySelector("svg").outerHTML;
  chart.dispose();

  return chartSvg;
};

const makePDF = (svg) => {
  const doc = new PDFDocument();
  const stream = fs.createWriteStream("file.pdf");

  SVGtoPDF(doc, svg, 0, 0);

  stream.on("finish", function() {
    console.log("Done");
  });

  doc.pipe(stream);
  doc.end();
};

const run = () => {
  const svg = getChartSVG(option);
  makePDF(svg);
};

run();

这里 svg-to-pdfkit 库在将 svg 内容添加到 pdf 文档中起着重要作用，否则将很难实现。

在此处查找代码存储库：https://github.com/muraliprajapati/echarts-node-pdf

如何在 NodeJS 中生成包含 eCharts 内容的 PDF API

How to generate a PDF with eCharts content in NodeJS API

node.js

pdf-generation

echarts