Блог

Я пытаюсь сгенерировать svg-файл графика, сгенерированного highcharts-export-server, после генерации я хочу добавить его в pdf, который генерируется pdfkit с помощью svg-to-pdfkit. Я работаю, когда мы вручную копируем данные из файла svg и сохраняем их в некоторой переменной, но это не работает, когда мы считываем те же данные из файла svg

 const fs = require("fs");
const chartExporter = require("highcharts-export-server");

const SVGtoPDF=require("svg-to-pdfkit")

const readline = require('readline');


const PDFDocument=require('pdfkit')
const doc = new PDFDocument({size: 'A4'});

doc.pipe(fs.createWriteStream('output.pdf'));
//svg contains data which is manually copied from svg file
const svg = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family:amp;quot;Lucida Grandeamp;quot;, amp;quot;Lucida Sans Unicodeamp;quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 8.2.2</desc><defs><clipPath id="highcharts-xyyrba3-9-"><rect x="0" y="0" width="518" height="276" fill="none"></rect></clipPath><clipPath id="highcharts-xyyrba3-13-"><rect x="0" y="0" width="518" height="276" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="600" height="400" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="72" y="47" width="518" height="276"></rect><g class="highcharts-pane-group" data-z-index="0"></g><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 160.5 47 L 160.5 323" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 330.5 47 L 330.5 323" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 500.5 47 L 500.5 323" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 323.5 L 590 323.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 268.5 L 590 268.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 213.5 L 590 213.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 157.5 L 590 157.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 102.5 L 590 102.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 46.5 L 590 46.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="72" y="47" width="518" height="276"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 160.5 323 L 160.5 333" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 330.5 323 L 330.5 333" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 500.5 323 L 500.5 333" opacity="1"></path><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 72 323.5 L 590 323.5"></path></g><g class="highcharts-axis highcharts-yaxis" data-z-index="2"><text x="26" data-z-index="7" text-anchor="middle" transform="translate(0,0) rotate(270 26 185)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="185"><tspan>Values</tspan></text><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 72 47 L 72 323"></path></g><g class="highcharts-series-group" data-z-index="3"><g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-0" data-z-index="0.1" opacity="1" transform="translate(72,47) scale(1 1)" clip-path="url(#highcharts-xyyrba3-13-)"><rect x="47.5" y="55.5" width="82" height="221" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" opacity="1" class="highcharts-point highcharts-color-0"></rect><rect x="217.5" y="232.5" width="82" height="44" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" opacity="1" class="highcharts-point highcharts-color-0"></rect><rect x="388.5" y="166.5" width="82" height="110" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" opacity="1" class="highcharts-point highcharts-color-0"></rect></g><g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-0" data-z-index="0.1" opacity="1" transform="translate(72,47) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"><tspan>Heading of Chart</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="46"></text><text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color:#666666;fill:#666666;" y="397"></text><g class="highcharts-legend" data-z-index="7" transform="translate(255,358)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="91" height="27" visibility="visible"></rect><g data-z-index="1"><g><g class="highcharts-legend-item highcharts-column-series highcharts-color-0 highcharts-series-0" data-z-index="1" transform="translate(8,3)"><text x="21" style="color:#333333;cursor:pointer;font-size:12px;font-weight:bold;fill:#333333;" text-anchor="start" data-z-index="2" y="15"><tspan>Series 1</tspan></text><rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point" data-z-index="3"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"><text x="160.60526315789" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="342" opacity="1">0</text><text x="331" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="342" opacity="1">1</text><text x="501.39473684211" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="342" opacity="1">2</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"><text x="57" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="327" opacity="1">0</text><text x="57" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="271" opacity="1">25</text><text x="57" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="216" opacity="1">50</text><text x="57" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="161" opacity="1">75</text><text x="57" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="106" opacity="1">100</text><text x="57" style="color:#666666;cursor:defau<font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="51" opacity="1">125</text></g><text x="590" class="highcharts-credits" text-anchor="end" data-z-index="8" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="395">Highcharts.com</text></svg>`;

   

// Initialize the exporter
chartExporter.initPool();
// Chart details object specifies chart type and data to plot
const chartDetails = {
   type: "image/svg xml",
   options: {
       chart: {
           type: "column"
       },
       title: {
           text: "Heading of Chart"
       },
       plotOptions: {
           pie: {
               dataLabels: {
                   enabled: true,
                   format: "<b>{point.name}</b>: {point.y}"
               }
           }
       },
       series: [
           {
               data: [
                   {
                       name: "a",
                       y: 100
                   },
                   {
                       name: "b",
                       y: 20
                   },
                   {
                       name: "c",
                       y: 50
                   }
               ]
           }
       ]
   }
};


chartExporter.export(chartDetails, (err, res) => {
   
    if (res.filename) {
        let svgString = fs.readFileSync(res.filename, 'utf8');
    
        console.log(svgString);
        SVGtoPDF(doc,`` svgString, 0,0);

        // Remove the file optionally
        fs.unlinkSync(res.filename);
      }
  

   chartExporter.killPool();
});

doc.end();

 

я хочу создать API, который будет возвращать PDF-документ, для этого я создал функцию, которая содержит код для разных страниц pdf

 const pdf=()=>{

first();
generateGraph(); //this will contain highchart export server which will export graph as svg and again by reading it it will saved in pdf;
... code for other pages of pdf
return doc;

}
 

я использую hapijs для разработки, и вся установка локальная, и сейчас я запускаю код на localhost
, я думаю, документ возвращается до выполнения функции chartExporter.export