export-svg-chart
export-svg-chart copied to clipboard
Converts SVG+CSS charts built with front-end technologies like D3 into SVG/PNG Node buffers for server-side use.
export-svg-chart

Converts SVG+CSS charts built with front-end technologies like D3 into SVG/PNG Node buffers for server-side use.
Install
This package requires node 4 or above.
npm install export-svg-chart --save
Example
To get SVG and PNG exports of your chart, you need to point the library towards a page that takes care of rendering it. This can be a dynamic rendering with UI elements, or an "export/print"-specific page with another skin for the chart.
const fs = require('fs');
const exportSvgChart = require('export-svg-chart');
const options = {
url: 'http://bl.ocks.org/mbostock/raw/7341714/',
selector: '.chart',
};
exportSvgChart(options, (err, buffers) => {
if (err) return console.log(err);
fs.writeFile('basic-example.svg', buffers.svg);
fs.writeFile('basic-example.png', buffers.png);
});
http://bl.ocks.org/mbostock/raw/7341714/ becomes:
Basic example SVG
What it does
Under the hood, this is using Electron which uses Chromium's rendering engine. The export is generated with saveSvgAsPng.
Caveats
- saveSvgAsPng doesn't support inlining of font face definitions (yet).
- If the chart is styled with ancestor selectors that are outside of it, the selectors need to be re-mapped when they are inlined. This isn't supported within this library at the moment.