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

【问题标题】：How to generate a PDF with eCharts content in NodeJS API如何在 NodeJS API 中生成包含 eCharts 内容的 PDF
【发布时间】：2021-08-26 09:54:21
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： node.js pdf-generation echarts

【解决方案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

【讨论】：

你是个传奇人物！非常感谢！
感谢这些开源库。我刚刚整合了它们。?
谢谢，但我有一个问题：如果您使用的是 svg 渲染器，Canvas 的目的是什么？这部分：``` echarts.setCanvasCreator(() => { return Canvas.createCanvas(100, 100); }); ```