Export to PDF in Node.js
Why FusionExport?
When there is something like Puppeteer or PhantomJS available, why use anything else? Well, you know what happened to PhantomJS – discontinued. On the other hand, FusionExport is a product actively maintained and developed by FusionCharts. Here are a few reasons why we are using FusionExport:- User-friendly APIs: FusionExport provides excellent APIs focused on exporting charts and dashboards, which help you save time as well.
- Integrations: It offers SDKs for C#, Java, Node.js, Python, and PHP. So even if your infra doesn’t support Node.js, no need to worry about it!
- Support: If you are facing any issues, you can always reach out to their support team, and you will get the answer in a matter of a few hours.
- Documentation: It provides excellent documentation with examples of real-world scenarios as well.
- Stability: FusionCharts actively develops FusionExport, and many enterprises around the world use it.
Installation of FusionExport
Installation of FusionExport contains two steps:- Setting up the FusionExport server
- Installing the SDKs in your project
Setting up the FusionExport server
Download FusionExport for the choice of your platform. Once you have downloaded it, unzip the package and open the terminal to run the following command:
./fusionexport
If you are using Windows then open PowerShell and run the following command:
./fusionexport.bat
Once done, your server will start running on the port number 1337 and the console will show messages similar to the screenshot below: 
Installing the Node.js SDK
Let’s create a Node.js project called ‘apexcharts-export’.
$ mkdir apexcharts-export
$ cd apexcharts-export
$ npm init
You will be asked to provide details for your project like name, author, license, etc. Give these details as per your requirements. Even if you keep most of them blank, it is absolutely fine. You can change them later in package.json
. Now that we have setup your project. Let’s install FusionExport SDK for Node.js:$ npm install fusionexport-node-client --save
You can check if the SDK has been installed properly by searching for fusionexport-node-client
directory in node_modules
. Everything is set and now is the time to write the implementation.Exporting a simple HTML to PDF
Before we go ahead export ApexCharts samples, let’s export a simple HTML snippet to PDF. Create a new file calledexport-single-chart.js
and include the dependencies:
// Import FusionExport SDK client for Node.js
const {
ExportManager,
ExportConfig
} = require('fusionexport-node-client');
// Instantiate ExportConfig and ExportManager
const exportConfig = new ExportConfig();
const exportManager = new ExportManager();
As you can see above, we have imported two modules from fusionexport-node-client
and instantiated them:ExportConfig
: This is where you will provide all the configurations to FusionExport like file type, template, etc.ExportManager
: Once you have defined the configurations, you will be passing them to ExportManager, which will further take care of exporting.
// Create a simple HTML to export
let template = '<h1>Hello world</h1>';
// Set all the configurations
exportConfig.set('template', template);
exportConfig.set('type', 'pdf');
exportConfig.set('templateFormat', 'a4');
As you can see, we are using 3 properties to configure:template
: This accepts the HTML template in a string format which you want to exporttype
: File format in which you want to export. We are usingpdf
but you can also usejpg
,png
andsvg
.templateFormat
: We are setting the page format toa4
. There are 7 more formats supported likea3
,letter
, etc.
Now, let’s export your first page:
exportManager.export(exportConfig, outputDir = '.', unzip = true).then((exportedFiles) => {
exportedFiles.forEach(file => console.log(file));
}).catch((err) => {
console.log(err);
});
As you can see above, we are passing exportConfig
to the export
method. Along with this, we set the outputDir
where the exported file should be stored (in this case it is the same directory). By default, your exported file will be present inside a zip, hence we set the unzip
flag to true
so that it will not be zipped. By default, export
method returns a promise. The success handler of the method gives an array of exported file names a parameter. It will be the path of the exported file in string format. Your final code will like:
// Import FusionExport SDK client for Node.js
const {
ExportManager,
ExportConfig
} = require('fusionexport-node-client');
// Instantiate ExportConfig and ExportManager
const exportConfig = new ExportConfig();
const exportManager = new ExportManager();
let template;
// Create a simple HTML to export
template = '<h1>Hello world</h1>';
// Set all the configurations
exportConfig.set('template', template);
exportConfig.set('type', 'pdf');
exportConfig.set('templateFormat', 'a4');
exportConfig.set('asyncCapture', true);
// Let's export!
exportManager.export(exportConfig, outputDir = '.', unzip = true).then((exportedFiles) => {
exportedFiles.forEach(file => console.log(file));
}).catch((err) => {
console.log(err);
});
Let’s run this code:
$ node export-single-chart.js
/path-to-your-project/apexcharts-export/export.pdf
If the code is executed successfully, the path of the exported file will be printed in the console. If you open it, then you will get output similar to this in an A4 page format: 
Exporting ApexCharts to PDF
Now that we know how to export a simple HTML file let’s learn how to export ApexCharts. There are three important steps to perform this:- Write an HTML template with JavaScript: Unlike earlier examples, we will be writing not just the HTML but also the JavaScript, which will render the chart.
- Set up the configurations: As mentioned, we will be providing the configurations with the template to FusionExport
- Export!
template.html
which will have the ApexCharts code as well.
<html>
<body>
<h1>ApexCharts Demo with FusionExport</h1>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
chart: { type: 'line' },
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997,1998,1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
There are a few things happening in the code:- We have added ApexCharts library from CDN
- We are rendering a simple line chart in the
script
tag - Since we won’t be rendering it as a webpage in the browser, we have skipped
head
andmeta
tags as well.
export-single-chart.js
, and following code snippet to read the HTML template and pass it to FusionExport:
const path = require('path');
let templatePath = path.join(__dirname, 'template.html');
// Set all the configurations
exportConfig.set('templateFilePath', templatePath);
exportConfig.set('type', 'pdf');
exportConfig.set('templateFormat', 'a4');
exportConfig.set('asyncCapture', true);
In the above snippet, we are doing the following things:- Replaced
template
withtemplateFilePath
where we are reading the HTML file made earlier. We are usingpath
module to provide the directory of the HTML file - We have kept rest of the configurations same
- We have added a property called
asyncCapture
which waits till the charts are loaded. It is extremely handy when you have charts with animations.
// Import FusionExport SDK client for Node.js
const {
ExportManager,
ExportConfig
} = require('fusionexport-node-client');
const path = require('path');
// Instantiate ExportConfig and ExportManager
const exportConfig = new ExportConfig();
const exportManager = new ExportManager();
let templatePath;
// Create a simple HTML to export
templatePath = path.join(__dirname, 'template.html');
// Set all the configurations
exportConfig.set('templateFilePath', templatePath);
exportConfig.set('type', 'pdf');
exportConfig.set('templateFormat', 'a4');
exportConfig.set('asyncCapture', true);
// Let's export!
exportManager.export(exportConfig, outputDir = '.', unzip = true).then((exportedFiles) => {
exportedFiles.forEach(file => console.log(file));
}).catch((err) => {
console.log(err);
});
Once you try to export, the final export will look like this: 
Making it pretty
Now that you have exported your first chart. Let’s make it pretty by adding some styles:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
}
h1 { text-align: center; }
#chart { margin-top: 1em; }
We will be adding the above code snippet in the head
. In the above code, we are doing the following things:- Replaced the default serif font with system font which means in case of latest macOS, you will see San Fransisco
- We have added padding across the page
- Made the header center aligned and added some margin between header and chart
chart: {
type: 'line',
toolbar: { tools: { download: false } }
}
Once, everything is done your file will look like this: 