All JavaScript-based components from Gantt Chart Hyper Library (and, through their client counterparts, as well those .NET 4 and .NET Core/5-based ones from Gantt Chart Web Library) allow you to either print or export content.
Printing actually uses content exporting – since that simply creates a new HTML document in a new window which can then be sent as content to the browser’s printing mechanism.
But sometimes HTML is not good enough. End users might want to get a SVG drawing or a PNG bitmap out of some Gantt chart content rather than just exposing it as HTML in a new browser tab or “printing” it as a PDF (or, why not, sending it to a real printer).
While there’s no built-in SVG/PNG export feature yet, such a feature can be easily added to a Web app by using some modern development techniques, too. Here is a comment-based guide to accomplish both SVG and PNG exporting with custom code:
function exportPng() {
// Prepare a temporary window to export content to.
var exportWindow = window.open('', '_blank', 'width=320,height=100,' +
'location=no,menubar=no,toolbar=no,status=no,scrollbars=yes'),
exportElement = exportWindow.document.body;
// Configure the output document's body for imaging purposes.
exportElement.style.backgroundColor = 'white';
exportElement.style.margin = '0';
// Export the Gantt Chart (ganttChartView component) using the provided
// options:
ganttChartView.exportContent(
{ title: 'Gantt Chart (exported)', isGridVisible: true,
columnIndexes: [1], timelineStart: new Date(year, month, 1),
timelineFinish: new Date(new Date(year, month, 1).valueOf()
+ 5 * 7 * 24 * 60 * 60 * 1000), preparingMessage: '...' },
exportWindow);
// Continue after exporting the content finishes.
setTimeout(function() {
// Determine the size needed by the exported image.
var width = exportElement.scrollWidth,
height = exportElement.scrollHeight;
// Prepare SVG image data URL, initializing an XML-based document of SVG
// type, with a foreighObject container that inlucdes full, valid XHTML
// for the exported object.
var dataUrl = 'data:image/svg+xml;charset=utf-8,' +
'<svg xmlns="http://www.w3.org/2000/svg" ' +
'width="' + width + '" height="' + height + '">' +
'<foreignObject x="0" y="0" width="100%" height="100%">' +
new XMLSerializer().serializeToString(exportElement)
.replace(/#/g, '%23').replace(/\n/g, '%0A') +
'</foreignObject>' +
'</svg>';
// Prepare a temporary image element to display the SVG content.
var image = new Image();
image.src = dataUrl;
// Continue after the image is loaded.
setTimeout(function() {
// Prepare a temporary canvas and have the image drawn into it
// (using a specific scale to ensure required output DPI/quality).
var canvas = document.createElement('canvas');
var scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext('2d')
.drawImage(image, 0, 0, width * scale, height * scale);
// Provide the content of the canvas as data URL and request client
// side downloading.
var link = document.createElement('a');
link.download = 'Gantt-export.png';
link.href = canvas.toDataURL();
link.click();
// Close the export window.
exportWindow.close();
});
});
}
Here are two full export image sample apps with full source code (check export* functions within app.js files): one for exporting SVG, and another one for exporting PNG.
DlhSoft Team's Blog 